title: Changing css dynamically without reloading page in Angular2
body: <p>I have a side navigation bar, wherein there is progress bar in each nav.
  This is modular structure-</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Inside progressIndicator.html, I have this code,</p>
  
  <pre><code> &lt;div class="progress"&gt;
      &lt;div [ngStyle]="{'width':getProgress()}" class="progress-bar" role="progressbar" aria-
         valuenow="70" aria-valuemin="0" aria-valuemax="100"&gt;
         &lt;span class="sr-only"&gt;70% Complete&lt;/span&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>
  And my progressIndicator.component.ts</p>
  
  <pre><code>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%';
      }
  }
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>[ngStyle]="{width:getProgress()}"
  </code></pre>
  
  <p>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.</p>