Arrow at the bottom for active link in angular

I am making an application in angular 6 and i am using bootstrap navbar for router links,

HTML,

<nav class="navbar navbar-expand-md bg-theme">
    <div class="container-fluid">
        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav text-light">
                <li class="nav-item" routerLinkActive="active">
                    <a routerLink="/home" class="nav-link text-capitalize theme-font-size-16" href="#">Dashboard</a>
                </li>
                <li class="nav-item" routerLinkActive="active">
                    <a routerLink="/about" class="nav-link text-capitalize theme-font-size-16" href="#">Template</a>
                </li>
                <li class="nav-item" routerLinkActive="active">
                    <a routerLink="/product" class="nav-link text-capitalize theme-font-size-16" href="#">Product</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="active"></div>

Here i need to get the active class of the clicked link, say if i click the link Product, then that particular link has to be get active and if active class applied then i need to show a arrow at the bottom of active link.

Here i am unable to get the active class of the clicked link rather than i am having for all the three links.

I am very new in angular and hence kindly help me if any basic thing missed in it.

The stackblitz that i have worked,

https://stackblitz.com/edit/angular-hhwx3j?file=src%2Fapp%2Fapp.component.html

Note: No jquery is allowed in it.

You have used routerLink and routerLinkActive directive which looks fine. Just include the routing configuration in Module.

example -

const routes: Routes = [
  { path: 'LinkA', component: AComponent },
  { path: 'LinkB', component: BComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class RootRoutingModule { }

Working demo copy is here https://stackblitz.com/edit/angular-routerlinkactive-ebsmaz