title: Angular 6 [ngclass] - add a class which is name is composed by several variables - string concatenation on [ngClass] directly
body: <p>I'm using angular 6. Taking the following variables as an example:</p>
  
  <pre><code>var1 = 'my';
  var2 = '-';
  var3 = 'class';
  </code></pre>
  
  <p>How can I do something like this:</p>
  
  <pre><code>&lt;div [ngClass]='var1 + var2 + var3'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Expecting that the HTML produced looks like this:</p>
  
  <pre><code>&lt;div class='my-class'&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>[Edit]</strong></p>
  
  <p>I know that is possible to use a auxiliary function in order to get the class name like this:</p>
  
  <pre><code>getClassName(): {
   return var1 + var2 + var3;
  }
  
  &lt;div [ngClass]='getClassName()'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But what I really want is a way to do that directly on the html using angular</p>