Aurelia binding CSS class
<p>I have an HTML element within a repeater where I want to change the class based on four conditions. The condition is based on a attribute from JSON. The attribute is called <code>type</code>, and the css classes I am working with are <code>red</code>,<code>blue</code>,and <code>green</code>.The conditions are:</p>

<ol>
<li>If <code>type</code> = red then assign css class <code>red</code></li>
<li>If <code>type</code> = blue  then assign css class <code>blue</code></li>
<li>If <code>type</code> = green  then assign css class <code>green</code></li>
<li>If <code>type</code> is not defined or null  then assign css class <code>red</code></li>
</ol>

<p>With my limited experience with AngularJS I know that I can set a conditional CSS using the <code>ng-style</code> attribute. How would I achieve this using Aurelia?</p>

<p>Sample HTML markup</p>

<pre><code>&lt;div repeat.for="item of projects" class="col-lg-6"&gt;
    &lt;div class="card-header"&gt;
        &lt;!-- I want to change the css class red based on the value of the JSON attribute type --&gt;
        &lt;div class="component-type red"&gt;
            ...
        &lt;/div&gt;
    &lt;/div&gt;
    ...
&lt;/div&gt;
</code></pre>