title: How to route nav tab with parameters in angular?
body: <p>Let's say I'm at the Tab1 with the parameter id=1. Concretely the resulting url is <a href="http://localhost:4200/project/tab1;id=1" rel="nofollow noreferrer">http://localhost:4200/project/tab1;id=1</a>. Now I click Tab2 and the url changes to  <a href="http://localhost:4200/project/tab2" rel="nofollow noreferrer">http://localhost:4200/project/tab2</a>. Is there a way to route the id too so that I get <a href="http://localhost:4200/project/tab2;id=1" rel="nofollow noreferrer">http://localhost:4200/project/tab2;id=1</a>?</p>
  
  <p><a href="https://stackblitz.com/edit/angular-qzwzju" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-qzwzju</a></p>
  
  <pre><code>&lt;nav mat-tab-nav-bar [backgroundColor]="'primary'"&gt;
      &lt;div mat-tab-link *ngFor="let link of navTabs" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive"&gt;
        {{link.label}}
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <pre><code>navTabs: NavTab[];
  
  activeLinkIndex: number = -1;
  
  constructor(private router: Router, private route: ActivatedRoute) {
    this.navTabs = [
      { label: 'Tab1', link: './tab1', index: 0 },
      { label: 'Tab2', link: './tab2', index: 1 },
      { label: 'Tab3', link: './tab3', index: 2 },
    ];
  }
  
  ngOnInit(): void {   
    this.router.events.subscribe((res) =&gt; {
      this.activeLinkIndex = this.navTabs.indexOf(this.navTabs.find((tab: NavTab) =&gt; tab.link === '.' + this.router.url));
    });
  }
  </code></pre>
  
  <pre><code>export const appRoutes: Routes = [
    { path: 'tab1', component: Tab1Component },
    { path: 'tab2', component: Tab2Component },
    { path: 'tab3', component: Tab3Component },
  ];
  </code></pre>