I'm having trouble adding the class to my active page link. It works on all pages, but the index is always active. For example, if I'm on the application page, both links are active.
Menu:
<li><a routerLink="/" routerLinkActive="ativo">Página inicial</a></li>
<li><a routerLink="/aplicacao" routerLinkActive="ativo">Aplicações</a></li>
Route:
{ path: '', component: HomeComponent },
{ path: 'aplicacao', component: AplicacaoComponent },
Has anyone ever had a similar problem?
By default, Angular 2 places as active, any url that at least has the url configured on the RouterLinkActive. That is, the URL "/" exists in the "/ application". Thus, Angular 2 places active on both the first and second elements.
To resolve this problem:
In the docs of the routerLinkActive directive there is another directive where you pass the policy options, this directive is called [routerLinkActiveOptions], in which you can pass an object with the parameter 'exact' (boolean) as value. Setting this parameter to true will cause the routerLinkActive to only add the class you passed in the "routerLinkActive" in the exact links. Therefore, if your URL is exactly "/", or exactly "/ application", the active will be added respectively.
Example in practice
<li><a routerLink="/" routerLinkActive="ativo" [routerLinkActiveOptions]="{exact: true}">Página inicial</a></li>
<li><a routerLink="/aplicacao" routerLinkActive="ativo">Aplicações</a></li>
It is up to you to use the "[routerLinkActiveOptions]" directive in the / application. You would do this if you want to create another sublink, for example: With the URL "/ app / app1".
Why Angular 2 does this by default?
For example, this feature is very useful when you want to create a "Nested menu" (Multi level dropdown menu), with this feature you can apply CSS to all the actives in a practical way, at all menu levels enabled.
Docs: