ngClass for multiple css styles condition

Question

HTML

    <span [ngClass]="{
                       'fas fa-star' : isSelected,
                       'far fa-star' : !isSelected
                     }"
          (click)="OnClick()">
    </span>

typescript

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-one-component',
  templateUrl: './one-component.component.html',
  styleUrls: ['./one-component.component.css']
})
export class OneComponentComponent implements OnInit {

@Input() isSelected : boolean;
@Output() change = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }
  OnClick(){
    this.isSelected= !this.isSelected;
    this.change.emit(this.isSelected);
  }

}

while clicking icon partial class were loaded like fas or far after space no class was added.

Interesting, seems like a bug, the common thing disappears in such expressions. The same expression work fine, if all the class name are unique. May be you have to change it like the answers below. — Maheswaran Ravisankar
– Maheswaran Ravisankar, Commented Jan 26, 2019 at 3:59

Jasmonate · Accepted Answer · 2019-01-26 03:54:41Z

1

If you’ll have the class “fa-star” in both scenarios, you can just do something like this:

<span [ngClass]=“{‘fa-star’:true, ‘fas’: isSelected, ‘far’: !isSelected}”></span>

edited Jan 26, 2019 at 3:54

answered Jan 26, 2019 at 3:46

Jasmonate

7521 gold badge8 silver badges19 bronze badges

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

Comments

Saveendra Ekanayake · Accepted Answer · 2019-01-26 03:46:01Z

0

HTML

<span class="fa-star" [ngClass]="{
                   'fas' : isSelected,
                   'far' : !isSelected
                 }"
      (click)="OnClick()">
</span>

or

<span class="" [ngClass]="{
                   'fas' : isSelected,
                   'far' : !isSelected,
                   'fa-star' : true
                 }"
      (click)="OnClick()">
</span>

Class binding can be done as above.

answered Jan 26, 2019 at 3:46

Saveendra Ekanayake

3,3236 gold badges39 silver badges45 bronze badges

Collectives™ on Stack Overflow

ngClass for multiple css styles condition

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related