How to change navigation bar name and icons dynamically on each page based on url ? Angular 2

Question

I need to change the navigation bar names and icons dynamically based on the page URL.

Here is my code:

 <nav id="brand" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header">
        <div class="navbar-brand">  
            <img src="{{wifiStatusIcon}}" class="wifiStatusIcon">

        </div>
    </div>
    <div id="navbar" class="collapse navbar-collapse">

        <ul class="nav navbar-nav">
            <li><a href="" [routerLink]="['/materials']"> <h3 class="pageName"  ng-bind="$root.name">{{title}} </h3>  </a></li>
            <li><a class="headerIconATag"><img class="headerIcon" src="{{headerIcon}}"></a></li>
        </ul>
    </div>
    <!--/.nav-collapse -->
</div>

Answer 1

Attach click event on all links and call component function ,in that function change all your binded variable like status icon,wifiicon

<ul class="nav navbar-nav">
        <li><a href="" [routerLink]="['/materials']"  (click)='routeChange("/materials")' > <h3 class="pageName"  ng-bind="$root.name">{{title}} </h3>  </a></li>
        <li><a class="headerIconATag"><img class="headerIcon" src="{{headerIcon}}"></a></li>
    </ul>

In Component create a function named routeChange

routeChange(route:string){
      if(route==="\material"){
       this.wifiStatusIcon ="icon/"
    }else{
       this.wifiStatusIcon ="icon2"
     }
}