I have a working side menu with [routerLinkActive] which allows me to get an active tab when I click on them. however, I cant get to load a default tab active
This is my html file:
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#" id="cerrado"> <span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-folder-open"></span></a></li>
<li><a [routerLink]="['/deudas']" [routerLinkActive]="['activado']">Mi Deuda<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
<li><a [routerLink]="['/morosos']" [routerLinkActive]="['activado']">Listado de Morosos<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>
<li><a [routerLink]="['/estado']" [routerLinkActive]="['activado']">Estado de Ingresos y Gastos<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-transfer"></span></a></li>
<li><a [routerLink]="['/reservas']" [routerLinkActive]="['activado']">Reservas areas comunes/sociales<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
<li><a [routerLink]="['/reclamos']" [routerLinkActive]="['activado']">Reclamos<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-alert"></span></a></li>
<li><a [routerLink]="['/mantenimiento']" [routerLinkActive]="['activado']">Planes de Mantenimiento<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-log-in"></span></a></li>
<li><a [routerLink]="['/personal']" [routerLinkActive]="['activado']">Personal<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li>
</ul>
</div>
this is what I get when the page loads
I wanna the second option to be active by default like in the second image, any ideas on how to accomplish this?
If you want to consider other options you can try something like this:
IsActive is another method you can find in the docs
https://angular.io/api/router/Router#isActive