How to style active navigation link on route in an angular dart project? - dart

Question

I am trying to implement the border bottom on the active link of the navigation router. But the navigation text gets hidden <a>Link 1</a> while click on the menu item.
Have a look at the image attached in the question.
app_component.html
<div class="material-content">
<header class="material-header shadow">
<div class="material-header-row">
<material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">YOUR TITLE</span>
<div class="material-spacer"></div>
</div>
<div class="border-bottom"></div>
<div class="header-nav">
<div class="material-header-row">
<nav class="material-navigation">
<a [routerLink]="RoutePaths.name.toUrl()"
[routerLinkActive]="'active'">Link 1</a>
</nav>
<nav class="material-navigation">
<a>Link 2</a>
</nav>
<nav class="material-navigation">
<a>Link 3</a>
</nav>
<nav class="material-navigation">
<a>Link 4</a>
</nav>
<nav class="material-navigation">
<a>Link 5</a>
</nav>
</div>
</div>
</header>
<router-outlet [routes]="Routes.all"></router-outlet>
</div>
app_component.css
.active {
background: #039be5;
height: 2px;
bottom: 0;
left: 0;
position: absolute;
}

Answer 1

The class that you are providing is changing the WHOLE anchor to be blue background, a height or 2px, and positioned in the bottom left corner. This is probably not what you want.
.active {
background: #039be5;
height: 2px;
bottom: 0;
left: 0;
position: absolute;
}
You could set the border-bottom itself to have the style. Or add another element for this style and use.
.active span {
...
}
or
.active:after {
...
}

Answer 2

.active a {
border-bottom: 2px solid;
border-bottom-color: $mat-blue;
padding-bottom: $mat-grid *2;
}