Show div when router is not equal - angular2

Question

I want to show this code only, if router is not equal '' and '/dashboard'.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li><a routerLink="/dashboard"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a></li>
    </ul>
</div>

How to do it?

Answer 1

You can create a service and set a flag when user navigate to /dashboard. Get the flag injecting the service and use as a condition with the *ngIf

Edit

Please take a look to the official documentation for RouterLinkActive directive.

In your case you can define a simple css class

.hidden {
    visibility:hidden;
 }

and apply it when the routerLinkActive is /dashboard

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" 
     routerLinkActive="hidden" [routerLinkActiveOptions]="{exact: true}">
    <ul class="nav navbar-nav navbar-right">
        <li><a routerLink="/dashboard"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a></li>
    </ul>
</div>

Answer 2

You can check following URL, Here is define exact solutions which you want. In Angular 2 how do you determine the active route?

1. First you need to bind the property.

   Your Tab Name
   

2. On basis of property you need to call a function (YourFunction) and pass your route.

3. Inside TS file you can check that your router is Active or Not, and then set a flag.
4. Use that flag with NgIf in to you your div which you want to show/hide.