title: Add class attribute value through interpolation of boolean
body: <p>I have a simple Angular 2 app pulling values from a JSON API and outputting a HTML list of those values.  The idea eventually is to create a tree view from the results built up by progressive API calls as tree nodes are opened in the UI.  For now I'm keeping it simple though and just returning a simple JSON object like this:</p>
  
  <pre><code>[
      {"Id":1054,"Name":"Rugby League","HasChildren":true},
      {"Id":1056,"Name":"Football","HasChildren":false}
  ]
  </code></pre>
  
  <p>I have an Angular 2 Component which consumes the data, like this:</p>
  
  <pre><code>@Component({
      selector: 'content-list',
      template: `
          &lt;ol class="tree"&gt;
              &lt;li *ngFor="#contentNode of contentNodes" class="tree__branch"&gt;
                  {{ contentNode.Name }}
              &lt;/li&gt;
          &lt;/ol&gt;
          &lt;div class="error" *ngIf="errorMessage"&gt;{{errorMessage}}&lt;/div&gt;
      `
  })
  </code></pre>
  
  <p>It pulls the JSON data and maps to the HTML list, which outputs a populated <code>&lt;ol&gt;</code> in the browser.</p>
  
  <p>What I want to do is set an <em>additional</em> class on the <code>&lt;li&gt;</code> element if the value of <code>HasChildren</code> from the JSON feed is <code>true</code>.</p>
  
  <p>I thought it'd be possible just to interpolate the value like this:</p>
  
  <pre><code>&lt;li *ngFor="#contentNode of contentNodes" class="tree__branch {{ contentNode.HasChildren ? "tree__branch--has-children" : "" }}"&gt;
  </code></pre>
  
  <p>However, this causes template compilation errors.</p>
  
  <p>Can anyone suggest how to get this working?</p>
  
  <p>Many thanks.</p>