
p.location-badge.
  exported from <a href='../router'>angular2/router</a>
  defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.37/modules/angular2/src/router/router_outlet.ts#L16-L153">angular2/src/router/router_outlet.ts (line 16)</a>

:markdown
  A router outlet is a placeholder that Angular dynamically fills based on the application's route.
  
  ## Use
  
  ```
  <router-outlet></router-outlet>
  ```
  
  

.l-main-section
  h2 Annotations
  .l-sub-section
    h3.annotation Directive
    pre.prettyprint
      code.
        @Directive({selector: &#39;router-outlet&#39;})


.l-main-section
  h2 Members
  .l-sub-section
    h3#name name

    
    :markdown





  .l-sub-section
    h3#activate activate

    
    pre.prettyprint
      code.
        activate(nextInstruction: ComponentInstruction)
    
    :markdown
      Called by the Router to instantiate a new component during the commit phase of a navigation.
      This method in turn is responsible for calling the `onActivate` hook of its child.
      
      





  .l-sub-section
    h3#reuse reuse

    
    pre.prettyprint
      code.
        reuse(nextInstruction: ComponentInstruction)
    
    :markdown
      Called by the <a href='Router-class.html'><code>Router</code></a> during the commit phase of a navigation when an outlet
      reuses a component between different routes.
      This method in turn is responsible for calling the `onReuse` hook of its child.
      
      





  .l-sub-section
    h3#deactivate deactivate

    
    pre.prettyprint
      code.
        deactivate(nextInstruction: ComponentInstruction)
    
    :markdown
      Called by the <a href='Router-class.html'><code>Router</code></a> when an outlet reuses a component across navigations.
      This method in turn is responsible for calling the `onReuse` hook of its child.
      
      





  .l-sub-section
    h3#canDeactivate canDeactivate

    
    pre.prettyprint
      code.
        canDeactivate(nextInstruction: ComponentInstruction)
    
    :markdown
      Called by the <a href='Router-class.html'><code>Router</code></a> during recognition phase of a navigation.
      
      If this resolves to `false`, the given navigation is cancelled.
      
      This method delegates to the child component's `canDeactivate` hook if it exists,
      and otherwise resolves to true.
      
      





  .l-sub-section
    h3#canReuse canReuse

    
    pre.prettyprint
      code.
        canReuse(nextInstruction: ComponentInstruction)
    
    :markdown
      Called by the <a href='Router-class.html'><code>Router</code></a> during recognition phase of a navigation.
      
      If the new child component has a different Type than the existing child component,
      this will resolve to `false`. You can't reuse an old component when the new component
      is of a different Type.
      
      Otherwise, this method delegates to the child component's `canReuse` hook if it exists,
      or resolves to true if the hook is not present.
      
      




