title: How do I trigger a router outlet in my app component from a nested component?
body: <p>If I have a setup like this</p>
  
  <pre><code>app-component
  |   |_navigation-component
  |         |_link-component
  |
  |_router-outlet
  </code></pre>
  
  <p>How can I trigger the router outlet from the link component?</p>
  
  <p>Normally we would have something like this when all in the same template</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a [router-link]="['home']"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a [router-link]="['portfolio']"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a [router-link]="['about']"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p></p>
  
  <p>Seeing that I'm doing it more like this</p>
  
  <pre><code>&lt;div&gt;
      &lt;nav-component&gt;&lt;/nav-component&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  
  &lt;!-- inside nav-component template --&gt;
  &lt;nav&gt;
      &lt;link-component&gt;&lt;/link-component&gt;
  &lt;/nav&gt;
  
  &lt;!-- inside link component template --&gt;
  &lt;li&gt;
      &lt;a [router-link]="['home']"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>so far triggering the link from 2 tiers down doesn't work.  How can this be done?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I figured I'd show how I have things set up incase it's more to it than some manual way of triggering it.</p>
  
  <p><code>app-routing.module</code></p>
  
  <pre><code>export const routes: Routes = [
      { path: '', redirectTo: '/home', pathMatch: 'full' },
      { path: 'home',       component: HomePageComponent },
      { path: 'examples',   component: ExamplesPageComponent },
      { path: 'howitworks', component: HowItWorksPageComponent },
      { path: 'resources',  component: ResourcesPageComponent },
      { path: 'aboutus',    component: AboutUsPageComponent }
  ];
  
  @NgModule({
      imports: [
          RouterModule.forRoot(routes)
      ],
      exports: [
          RouterModule
      ]
  })
  
  export class AppRoutingModule {}
  </code></pre>
  
  <p><code>link data</code></p>
  
  <pre><code>export const LinkData: Array&lt;LinkParams&gt; = [
      { Link: 'Home',         Trigger: 'home',       Type: 'main' },
      { Link: 'Examples',     Trigger: 'examples',   Type: 'main' },
      { Link: 'How It Works', Trigger: 'howitworks', Type: 'main' },
      { Link: 'Resources',    Trigger: 'resources',  Type: 'main' },
      { Link: 'About Us',     Trigger: 'aboutus',    Type: 'main' }
  ]
  //the data I'm iterating down into the link component
  </code></pre>
  
  <p><code>app.component (template)</code></p>
  
  <pre><code>&lt;div  class="appComp-grid" [ngStyle]="{'grid': Grid.GridCode}"&gt;
      &lt;link-container [ngStyle]="{'grid-area': Grid.GridAreas.LinkContainer}" [SiteLinks]="Links"&gt;&lt;/link-container&gt;
  
      &lt;div [ngStyle]="{'grid-area': Grid.GridAreas.BodySection, 'justify-content': 'stretched'}"&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
  
      &lt;footer-component [ngStyle]="{'grid-area': Grid.GridAreas.FooterSection}"&gt;&lt;/footer-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>link-container.component (template)</code></p>
  
  <pre><code>&lt;header class="linkComp-grid" [ngStyle]="{'grid': Grid.GridCode}"&gt;
  
      &lt;div [ngStyle]="{'grid-area': Grid.GridAreas.MainLink, 'display': 'grid', 'grid-auto-columns': 'auto', 'grid-auto-flow': 'column'}"&gt;
  
          &lt;link-component *ngFor="let a of SiteLinks" [Link]="a"&gt;&lt;/link-component&gt;
  
      &lt;/div&gt;
  
      &lt;div [ngStyle]="{'grid-area': Grid.GridAreas.FeatureLink, 'grid-auto-flow': 'column', 'justify-self': 'end'}"&gt;
          &lt;h3&gt;Feature Link&lt;/h3&gt;
      &lt;/div&gt;
  
  &lt;/header&gt;
  </code></pre>
  
  <p><code>link.component (template)</code></p>
  
  <pre><code>&lt;a class="linkComp-grid"
     [ngStyle]="{'grid': Grid.GridCode}"
     [routerLink]="Link.Trigger" routerLinkActive="active"
  &gt;
      &lt;p [ngStyle]="{'grid-area': Grid.GridAreas.LinkArea, 'text-align': 'center'}"&gt;
          {{Link.Link}}
      &lt;/p&gt;
  &lt;/a&gt;
  </code></pre>