Angular: get absolute path with routerLink

Question

I'm working on a navigation button bar where the current route toggle a css-class (footer-btn-active) which "lights" up the button of the current route.

This is the current code:

<button routerLink="/system"
                routerLinkActive="footer-btn-active"
                class="footer-btn">System-info</button>

how it works now: The button class (footer-btn-active) stays active, on every path of /system/...

how it should work: I want that the button class (footer-btn-active) stays active, only on the absolute path /system

Answer 1

try with below property, exact: true will only make class active if exact path matches.

<button 
routerLink="/system"
routerLinkActive="footer-btn-active"
[routerLinkActiveOptions]="{ exact: true }"
class="footer-btn">System-info</button>