Multiple RouterLinkActive trigger CSS class at the same time - html

Question

I'm using multiple <a> tags to use routerLink.
When I first load my home page, the home icon (which is in aMenuItems) has the active class thanks to routerLinkActive and the rest of the array aMenuItems does not. This is a good behaviour.
However, both <a> tags in bottom-group has the active class triggered as the home icon. I tried to set the attribute exact in routerLinkActiveOptions to true but nothing changes.
As soon as I select another page other than home page, this bug disappears.
HTML:
<div class="top-group">
<a
*ngFor="let oItem of aMenuItems"
class="menu-item"
[routerLink]="oItem.link"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon>{{oItem.icon}}</mat-icon>
<p>
{{oItem.designation}}
</p>
</a>
</div>
<div class="bottom-group">
<a
class="menu-item"
[routerLink]="routerLinkMarketPlace"*
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon>apps</mat-icon>
<p>applications</p>
</a>
<a
class="menu-item"
[routerLink]="routerLinkSettings"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon>settings</mat-icon>
<p>paramètres</p>
</a>
</div>

Answer 1

I found a solution to my problem:
In HTML, I replaced the routerLinkActive with a class condition using the attribute isActive from the router.
<a
class="menu-item"
[routerLink]="routerLinkSettings"
[class.active]="router.isActive(routerLinkSettings)"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon>settings</mat-icon>
<p>parameters</p>
</a>
You also need to inject the router in your .ts
constructor(private router: Router) {
super();
}
Hope it can help someone passing by !