Angular 2 add class dynamically

Question

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?

ranakrunal9 · Accepted Answer · 2016-11-23 10:52:54Z

3

Use ngClass as given below :

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

answered Nov 23, 2016 at 10:52

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 add class dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related