How to change the css class name dynamically in angular 2


Tags: html,css,angular2,ionic2

Problem :

I have two CSS class name as follows

.icon_heart{
     color: #bdbdbd;
}

.icon_heart_red{
    color:#a6b7d4;;
}

My HTML has 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>

Here I have two div tags, the heart icon is of gray color initially and on clicking that I will change it to blue color.

Here is my ts file code:

  showheartIcon=true;
  showheartIconRed =false;

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

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

I have two icons of different color.

Question

Instead of having two heart icons is it possible to change the class of the icon?

I have seen in JavaScript we can change it w3schools simple way to apply class to the div tag, but I am new to TypeScript. How can I change the class?



Solution :

<div 
    [class.icon_heart]="!showheartIconRead"
    [class.icon_heart_red]="showheartIconRead">

or

<div [ngClass]="showheartIconRead ? 'icon_heart_red' : 'icon_heart'">

    CSS Howto..

    How to display first tab by default in css?

    How to edit the css style of validation ng-class error

    How to reset a jquery function on-the-fly

    How do you select a radio button in css?

    How to zoom in to a specific point smoothly with CSS?

    How should I use `position` and other properties correctly to position my web page?

    How to insert variables in inline CSS rules with pure JavaScript?

    How do I make a div top to be the bottom of other div

    How to format f.submit with css, glyphicons, and symbol?

    CSS: How to prevent Background colour to be overwritten by colour from less-file

    How to center post title in blogger. (tried applying CSS)

    How do I make a div with guide lines?

    PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?

    How do I create a mobile version of Nav Bar [closed]

    Thymeleaf: how to use conditionals to add/remove dynamically a CSS class

    How to write Text in css like show in images?

    How to create popup panel using JavaScript & CSS, no libraries?

    How to hide child element entirely if it is cut off by it's parent's overflow:hidden property?

    How to embed video on my first website

    How to disable CSS style relatively to a certain parent tag?

    How to let the browser cache css and js files for a https site?

    How can I use :before property to create a square before a span

    How to keep long image within background cover at any screen size in CSS?

    How to use JavaScript to Alter CSS for Multiple Elements

    How to stop children from clipping when using dynamic height parents?

    How to change the height of div with the content of other div

    How to create uparrow downarrow using simple css

    How to get page content to stretch and stick footer to bottom of page?

    How to use media queries in an effective way? [closed]

    How to render a hierarchy tree in HTML5/CSS?