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

Question

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'
  }
];

There is no routerLink attribute. Also, `index: this.routeLinks.length` within the assignment to `routeLinks` seems wrong. — Clashsoft, Oct 26 '21 at 13:54
It is there i missed to added in question.
. Even i removed the index too and verified no luck! — Madhavi, Oct 26 '21 at 14:53
Thats the router outlet. routerLink should be an attribute on the anchor tag: ``. — Clashsoft, Oct 26 '21 at 14:54

score 0 · Answer 1 · answered Oct 26 '21 at 13:51

Here is what i have used in the past.

<nav mat-tab-nav-bar>
  <span
    mat-tab-link
    *ngFor="let routeLink of routeLinks; let i = index"
    [routerLink]="nav.link"
    routerLinkActive
    #rla="routerLinkActive"
    [routerLinkActiveOptions]="{ exact: true }"
    [active]="rla.isActive"
  >
    {{ routeLink.label }}
  </span>
</nav>

<div class="container my-3">
  <router-outlet></router-outlet>
</div>

Madhavi · Accepted Answer · 2021-10-28T09:25:43.627

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' }];

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

2 Answers2