title: Angular 5 trigger navigation on parent router-outlet from child outlet
body: <p>I have a series of Angular components in the structure as follows.</p>
  
  <ul>
  <li>RootComponent --> Contains router-outlet   
  
  <ul>
  <li>Child component ->
  contains router-outlet
  
  <ul>
  <li>Grand child component -> Contains a button to trigger a navigation back to the root component</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>My question is from a routerLink on a button in the grandchild component how do I navigate to the rootcomponent?</p>
  
  <p>app-routes</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      redirectTo: environment.devRedirect,
      pathMatch: 'full',
      canActivate: [AuthenticationGuard]
    },
    {
      path: 'customers/:customerId/contracts/:contractId',
      canActivate: [AuthenticationGuard],
      children: [
        {
          path: 'projects/:projectId/grouping',
          loadChildren: './grouping/grouping-routing.module#GroupingRoutingModule',
          data: { animation: 'grouping' },
          canActivate: [ AuthenticationGuard ]
        },
        {
          path: '',
          loadChildren: './projects/projects-routing.module#ProjectOverviewRoutingModule',
          data: {
            animation: 'project-overview'
          },
          canActivate: [ AuthenticationGuard ],
        },
      ]
    }
  ];
  </code></pre>
  
  <p>child component routes</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      component: GroupingComponent,
      canActivate: [ AuthenticationGuard ],
      children: [
        {
          path: 'create',
          component: CreateEditComponent,
          data: { animation: 'create' },
          canActivate: [ AuthenticationGuard ]
        },
        {
          path: ':groupId/edit',
          component: CreateEditComponent,
          data: { animation: 'edit' },
          canActivate: [ AuthenticationGuard ]
        },
        {
          path: '',
          component: OverviewComponent,
          data: { animation: 'overview' },
          canActivate: [ AuthenticationGuard ]
        }
      ]
    }
  
  ];
  </code></pre>