CODEWITHSUNDEEP
angular
emvidi
emvidi

Reputation: 1300

Angular 2 add class dynamically

Having this template: 

<li role="menu" class="drop-down">
  <a class="drop-down--toggle">
    <span class="flag-icon" [class]="_current.flag"//<-- don't work></span>
  </a>
  <ul class="drop-down--menu>
  ...
  </ul>
</li>

and this model:

export class LocaleModel {
  id: number;
  code: string;
  name: string;
  fileName: string;
  flag: string;// <-- could be "flag-icon-es" or "flag-icon-gb"

  constructor(id: number, code: string, name: string, fileName: string, flag: string) {}
  }

the desired end effect will be: 

<li role="menu" class="drop-down">
  <a class="drop-down--toggle">
    <span class="flag-icon flag-icon-es"></span>
  </a>
  <ul class="drop-down--menu">
  ...
  </ul>
</li>

Is it possible to have part of the class added dynamically or should I save the whole class name like "flag-icon flag-icon-es" and add it whole?

Upvotes: 0

Views: 5876

Answers (1)

ranakrunal9
ranakrunal9

Reputation: 13558

Use ngClass as given below :

<span class="flag-icon" [ngClass]="[_current.flag]"></span>

Upvotes: 3

Related Questions