<div class="tabs-container">
  <div class="tabs">
    <a routerLink="tab1" routerLinkActive="active">Tab 1</a>
    <a routerLink="tab2" routerLinkActive="active">Tab 2</a>
    <a routerLink="tab3" routerLinkActive="active">Tab 3</a>
  </div>

  <div class="tab-content">
    <router-outlet></router-outlet>
  </div>
</div>

    

The router config looks like this — using the children section for nested / child routing:

       {
    path: 'tabs', 
    component: TabsComponent,
    children: [
      { path: '', redirectTo: 'tab1', pathMatch: 'full' },
      { path: 'tab1', component: Tab1Component },
      { path: 'tab2', component: Tab2Component },
      { path: 'tab3', component: Tab3Component }
    ]
  }

    

That config means that if the browser URL becomes /tabs, the TabComponent is displayed in the main router outlet, and the Tab1Component is displayed in the router outlet of TabComponent, because the empty child path redirects to /tab1, which then renders Tab1Component.

Then, if the browser URL becomes /tabs/tab3, the TabComponent is still displayed in the main router outlet, and Tab3Component is displayed in the router outlet of TabComponent.

This has three important benefits:

1. You can create links that navigate to a specific tab or sub-section of any given screen
2. Since the current “tab” depends on the URL, switching tabs can be done using the browser’s previous/next buttons. A full page refresh would display the same tab selected.
3. A URL can be bookmarked to display the application in the same state with the same tab selected.

You can see the code of my example on Stackblitz here.