Nested routes in Angular 2+

app.routing.ts

...
{ path: 'wall', component: WallHandlerComponent, canActivate: [LoggedGuard], 
children: [
  { path: '', redirectTo: 'recent', pathMatch: 'full' },
  { path: 'recent', component: RecentEventsComponent },
  { path: 'ranking', component: RankingUsersComponent }
] },
...

item.component.html

...
<nav mat-tab-nav-bar>
  <a mat-tab-link
    *ngFor="let link of wallNavLinks"
    [routerLink]="link.path"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>

<router-outlet name="walloutlet"></router-outlet>
...

item.component.ts

...
get wallNavLinks(): { label: string, path: any[] }[] {
  return [
    { label: 'Recent', path: 'recent' },
    { label: 'Ranking', path: 'ranking' }
  ];
}
...