Как оформить активную навигационную ссылку на маршруте в проекте angular dart?

Я пытаюсь реализовать нижнюю границу на активной ссылке навигационного маршрутизатора. Но текст навигации становится скрытым <a>Link 1</a> при щелчке по пункту меню.

Посмотрите на изображение, прикрепленное к вопросу.

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;
}