angulartypescriptangular-materialangular-routerlink

Change in URL is working but route change is not happeningin Angular

Url is changing like expected in while clicking but that particular route is not getting loaded. Please find the below code for reference.

HTML

<a
  mat-tab-link
  *ngFor="let routeLink of routeLinks; let i = index"
  [routerLink]="routeLink.link"
  [routerLinkActive]="'mat-tab-link-active'"
  #rla="routerLinkActive"
  class="mat-tab-link"
>
  {{ routeLink.label }}
</a>

TS

const path = `/site/`;
this.routeLinks = [
  {
    key: 'network',
    link: path + 'network'
  },
  {
    key: 'subnets',
    link: path + 'subnets'
  }
];
Solution

  • My component has multiple router-outlet in the parent component. The code snippet I shared is the child component so, the router is not working as expected. Finally, I understood the root cause I added the outlet to the router-outlet like below in the parent component resolves my issue. HTML

      <router-outlet name="dashboard-outlet"></router-outlet>

    Routing TS

    const routes: Routes = [{ path: '', component: ComponentName, outlet: 'dashboard-outlet' }];