title: set default tab active when page loads Angular 4
body: <p>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</p>
  
  <p>This is my html file:</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                    &lt;li&gt;&lt;a href="#" id="cerrado"&gt;&amp;nbsp;&lt;span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-folder-open"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a [routerLink]="['/deudas']" [routerLinkActive]="['activado']"&gt;Mi Deuda&lt;span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a [routerLink]="['/morosos']" [routerLinkActive]="['activado']"&gt;Listado de Morosos&lt;span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a [routerLink]="['/estado']" [routerLinkActive]="['activado']"&gt;Estado de Ingresos y Gastos&lt;span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-transfer"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a [routerLink]="['/reservas']" [routerLinkActive]="['activado']"&gt;Reservas areas comunes/sociales&lt;span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a [routerLink]="['/reclamos']" [routerLinkActive]="['activado']"&gt;Reclamos&lt;span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-alert"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a [routerLink]="['/mantenimiento']" [routerLinkActive]="['activado']"&gt;Planes de Mantenimiento&lt;span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-log-in"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a [routerLink]="['/personal']" [routerLinkActive]="['activado']"&gt;Personal&lt;span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p>this is what I get when the page loads</p>
  
  <p><a href="https://i.stack.imgur.com/YEYne.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YEYne.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/NYt6A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NYt6A.png" alt="enter image description here"></a></p>
  
  <p>I wanna the second option to be active by default like in the second image, any ideas on how to accomplish this?</p>