How can I dynamically change CSS class names in an Angular application?

Question

I have two CSS class names as follows.

.icon_heart{
     color: #bdbdbd;
}

.icon_heart_red{
    color: #a6b7d4;;
}

My HTML contains a heart icon.

<div class="icon_heart" *ngIf="showheartIcon">
    <ion-icon name="heart" (click)="setWishlistTrue(category.product_id);" class="heart"></ion-icon>
</div>
<div class="icon_heart_red" *ngIf="showheartIconRed">
    <ion-icon name="heart" (click)="setWishlistFalse(category.product_id);" class="heart"></ion-icon>
</div>

There are two div elements. The heart icon has a grey colour until the user clicks it, then it should change to blue.

The following block of code is from my TypeScript file; two icons with different colours.

  showheartIcon = true;
  showheartIconRed = false;

  setWishlistTrue(id){
    this.showheartIconRed = true;
    this.showheartIcon = false;
  }

  setWishlistFalse(id){
    this.showheartIconRed = false;
    this.showheartIcon = true;
  }

Is it possible to replace the class of the icon, instead of having two of them?

I have seen in JavaScript that I can add a class to any HTML element.

How can I achieve that in Angular?

Graham John · Accepted Answer · 2023-03-11 17:31:15Z

23

You can change CSS class names using the following options.

Option 1

<div 
    [class.icon_heart]="!showheartIconRed"
    [class.icon_heart_red]="showheartIconRed">This is an example.</div>

Option 2

<div [ngClass]="showheartIconRed ? 'icon_heart_red' : 'icon_heart'">This is another example.</div>

edited Mar 11, 2023 at 17:31

Graham John

16914 bronze badges

answered Sep 15, 2016 at 9:23

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

Kamil Kiełczewski Over a year ago

However if you use ionic2 components (like <ion-textarea>) this two options not work similar - [ngClass] will work differently than [class.xx]

Kamil Kiełczewski Over a year ago

sorry - i check this again - and they work similar (probably the other problem case different behaviour in my case)

Tadija Bagarić Over a year ago

To place multiple classes: <div [ngClass]="showheartIconRead ? 'icon_heart_red big' : 'icon_heart small'">

Günter Zöchbauer Over a year ago

Using [ngClass]="..." should be pregerred onver [class]="..."

Graham John · Accepted Answer · 2023-03-11 21:42:30Z

8

You can use the following method in addition to the answer above.

<div class="{{showheartIconRed ? 'icon_heart_red' : 'icon_heart' }}">

edited Mar 11, 2023 at 21:42

Graham John

16914 bronze badges

answered Mar 15, 2018 at 12:33

Sanju

2364 silver badges8 bronze badges

Collectives™ on Stack Overflow

How can I dynamically change CSS class names in an Angular application?

Is it possible to replace the class of the icon, instead of having two of them?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Is it possible to replace the class of the icon, instead of having two of them?

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related