Changing css dynamically without reloading page in Angular2

Question

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.

score 2 · Answer 1 · answered Jun 06 '17 at 14:14

2

You should return the whole style object from a method:

Component

getStyle():any{
    return { width: getProgress() };
}

Template:

[ngStyle]="getStyle()";

This way, the whole getStyle method will be called upon change detection, which should update your style even if you don't reload (because, as you said, you should never have to reload).

answered Jun 06 '17 at 14:14

Supamiu

8,501
7
42
76

Its still only changing on reload. :( – Uzair Khan Jun 06 '17 at 16:03

Ethilium · Answer 2 · 2017-06-06T17:13:52.717

2

Return the full key:value pair in your call. Also bring the assigning of currentPage into your function.

HTML

[ngStyle] = "getProgress()"

TS

getProgress(){
   let currentPage = this.router.url;
   let progressBar;
   if(currentPage  === 'children1'){
         progressBar = {'width' : '25%'};
     }
   if(currentPage  === 'children2'){
         progressBar = {'width' : '50%'};
    }
   return progressBar
}

Here is a good write up on ngStyle use.

edited Jun 06 '17 at 17:13

answered Jun 06 '17 at 14:59

Ethilium

1,224
1
14
20

Its still only changing on reload. :( – Uzair Khan Jun 06 '17 at 16:03
1

@MichaelPhilips. The answer has been updated. Does this correct this issue? – Ethilium Jun 06 '17 at 17:14
No, it does only on reload of the page :( – Uzair Khan Jun 06 '17 at 17:27
@MichaelPhilips Do you have a plunkr of your code? If not, I might try to throw something together and test it later. Just don't have time to build it out now. – Ethilium Jun 06 '17 at 18:27

Changing css dynamically without reloading page in Angular2

2 Answers2