angular - How to change the css class in angular2?

Question

<button type="button" class="btn btn-primary" (click)="height = height ? 0 : el.scrollHeight">
   Toggle button<span id="Section1_togglearrow" class="pull-right fa fa-caret-up" style="margin: 2px auto; font-size: 20px;"></span>
</button>

I have the code as mentioned above.

I want to change the span class to "pull-right fa fa-caret-down" if height is 0. If height is the element height then I want to set the class to "pull-right fa fa-caret-up". How to achieve this using angular2.

Basically I am trying to toggle and I want to change the icon on toggling.

Answer 1

I'm not sure if the calculation of the height works correctly, because my guess is that el.scrollHeight is undefined. However, I cannot judge this based on your example.

There are two classes which are static in both situations. I've declared those using the regular class attribute in the code example below. fa-caret-down and fa-caret-up depend on an expression. For those you want to use the form: [class.name-of-class]="expression".

<span class="pull-right fa" 
   [class.fa-caret-down]="height === 0" 
   [class.fa-caret-up]="height > 0">
</span>

Refer to the template syntax table within the Angular Cheat Sheet for more useful template examples.