I have a side navigation bar, wherein there is progress bar in each nav.
This is modular structure-

```
MainFile
   -Children1
       -children1.html
       -children1.component.ts
  -Children2
       -children2.html
       -children2.component.ts
  -Children3
       -children3.html
       -children3.component.ts
  -ProgressIndicator
       -progressIndicator.html
       -progressIndicator.component.ts
  -main.html
  -main.component.ts

```

Inside progressIndicator.html, I have this code,

```
 <div class="progress">
    <div [ngStyle]="{'width':getProgress()}" class="progress-bar" role="progressbar" aria-
       valuenow="70" aria-valuemin="0" aria-valuemax="100">
       <span class="sr-only">70% Complete</span>
   </div>

```

And my progressIndicator.component.ts

```
currentPage = '';
progressBar = '';
//getting current route name using 'this.route.url' and updating 'currentPage' property in 
constructor.
getProgress(){
   if(currentPage  === 'children1'){
         return progressBar = '25%';
     }
   if(currentPage  === 'children2'){
        return progressBar = '50%';
    }
}

```

I am successfully getting the current page, as 'children1.html' or 'children2.html', based on the current page I want to change the width of div with class 'progress-bar', I used 

```
[ngStyle]="{width:getProgress()}"

```

but it takes effect ONLY if page reloads, which angular2 being SPA doesn't happen.
Do help me in finding a better way that when I move from 'children1' to 'children2', the 'getProgress()' takes effect and changes the style.