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.

<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> — test
– test, Commented Feb 10, 2017 at 20:39

David Walschots · Accepted Answer · 2018-03-19 12:26:04Z

2

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.

edited Mar 19, 2018 at 12:26

answered Feb 10, 2017 at 21:00

David Walschots

12.7k5 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change the css class in angular2?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related