routerLinkActive does not work with router.navigateByUrl or navigate

Question

I am changing the route through a (click) and not a [routerLink] and this is not add class active but change the route

I have to generate an id in the server and after that run this.router.navigate and activate the link in my side menu

    <li
      routerLinkActive="active" 
      [routerLinkActiveOptions]="{exact: false}">
      <a
        class="nav-link"
        (click)="addNew()"
      >
      </a>
    </li>

my function

  addNew(): void {
    this.userService.create().subscribe(res => {
      this.router.navigateByUrl(`user/edit/${res.data.id}`);
    });
  }

Other places in the menu are using [routerLink] and it works normally

thanks for help

Answer 1

routerLinkActive relies on having a routerLink on either the same host or a descendant in order to know what the candidate links are.

You need to add a routerLink to your <a>.

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}">
  <a routerLink="???" class="nav-link" (click)="addNew()">
  </a>
</li>