routerLinkActiveOptions: {exact:true} doesn't work

[storin]

Hello everyone

I try to create a TabMenu, I found this docs https://www.primefaces.org/primeng/tabmenu
I am using routing to navigate between my views so I have to use routerLink and [routerLinkActiveOptions] = "{exact: true}" directive for empty home path routerLink="/"

my code looks like that:

navigation.component.ts

Code: Select all

export class NavigationComponent implements OnInit {

  items: MenuItem[] = [];
  activeItem: MenuItem;

  constructor() {
  }

  ngOnInit(): void {
    this.items = [
      {label: 'Home', icon: 'pi pi-fw pi-home', routerLink: '/', routerLinkActiveOptions: {exact:true}},
      {label: 'Calendar', icon: 'pi pi-fw pi-calendar', routerLink: '/login'},
      {label: 'Edit', icon: 'pi pi-fw pi-pencil', routerLink: '/word'},
      {label: 'Documentation', icon: 'pi pi-fw pi-file', routerLink: '/lesson'},
      {label: 'Settings', icon: 'pi pi-fw pi-cog', routerLink: '/settings'}
    ];

    // this.activeItem = this.items[0];
    
  }

}

}  
  

navigation.component.html

Code: Select all

<div>
  <a routerLink="/" routerLinkActive="active-link" [routerLinkActiveOptions]='{exact: true}'>Home</a>
  <a routerLink="/login" routerLinkActive="active-link">Login</a>
  <a routerLink="/word" routerLinkActive="active-link">Word</a>
</div>

<p-tabMenu [model]="items" [activeItem]="activeItem">
  <ng-template pTemplate="item" class="own-class" let-item let-i="index">
    <div class="p-button-icon align-items-center"><span [class]="item.icon"></span></div>
    {{ item.label }}
  </ng-template>
</p-tabMenu>

First menu works fine in html file works fine (it is basic approach without any ng prime affect) but second p-tabMenu always underline (shows as active) first item. I couldn't find any answer for this issue in google so please guide me how to properly use this param in this case.