Angular 2 add class dynamically
<p>Having this template: </p>

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

<p>and this model:</p>

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

  constructor(id: number, code: string, name: string, fileName: string, flag: string) {}
  }
</code></pre>

<p>the desired end effect will be: </p>

<pre><code>&lt;li role="menu" class="drop-down"&gt;
  &lt;a class="drop-down--toggle"&gt;
    &lt;span class="flag-icon flag-icon-es"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;ul class="drop-down--menu"&gt;
  ...
  &lt;/ul&gt;
&lt;/li&gt;
</code></pre>

<p>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?</p>