set default tab active when page loads Angular 4

Question

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">&nbsp;<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?

Possible duplicate of [Angular2 default active link on site load](https://stackoverflow.com/questions/43585445/angular2-default-active-link-on-site-load) — Hugo Noro, Nov 30 '17 at 22:11
this works but before I marked it as duplicate, is there another way to acomplish this? — Rildo Gomez, Nov 30 '17 at 22:38

score 0 · Answer 1 · answered Nov 30 '17 at 22:57

0

If you want to consider other options you can try something like this:

<li [class.activado]="router.isActive('/deudas’)” />

IsActive is another method you can find in the docs

https://angular.io/api/router/Router#isActive

answered Nov 30 '17 at 22:57

Hugo Noro

3,145
2
13
19

can you explain a little, please? – Rildo Gomez Dec 01 '17 at 03:47
Of course. So here you are setting the css class ‘activado’ ( I took it from your example ) to the li whenever the condition on the right of the assignment is true. So if the router.isActive condition returns true it will set the css class on the li. I’m now seeing you had the class on the a and not on the li. But you should be able to adapt my example to your needs :) – Hugo Noro Dec 01 '17 at 07:53

set default tab active when page loads Angular 4

1 Answers1