title: Angular2 bind using conditional operator
body: <p>I have a question about the binding in angular2.</p>
  
  <p>I wrote a simple component, this is the code:</p>
  
  <pre><code>@Component({
      selector: 'drawer-item',
      templateUrl: '../res/views/drawer-item.html'
  })
  export class DrawerItemComponent
  {
      @Input() text:string;
      @Input() icon:string;
      @Input() textClass:string;
  }
  
  &lt;div class="drawer-item-text word-wrap {{textClass}}"&gt; {{text}}&lt;/div&gt;
  &lt;i class="mdi mdi-{{icon}} drawer-item-img"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>I use it like this:</p>
  
  <pre><code>&lt;drawer-item (click)="selectCompany()" [text]="selectedCompanyLabel" [icon]="selectedCompanyIcon" [textClass]="selectedCompanyClass"&gt;&lt;/drawer-item&gt;
  </code></pre>
  
  <p>As you can see I'm binding the text with variable, for example with <em>selectedCompanyLabel</em>.
  In this way everything works great, and if <em>selectedCompanyLabel</em> change tha label changes as well. </p>
  
  <p>I would avoid that variable using something like:</p>
  
  <pre><code>[text]="company ? 'company.name' : 'Select a company'"
  </code></pre>
  
  <p>But is this way the content is not binded. So if <em>company</em> changes, the label is not updated.</p>
  
  <p>But if I use that strategy in a style, it works! For example something like works great:</p>
  
  <pre><code>&lt;div class="company ? 'italic' : 'bold'"&gt; ... &lt;/div&gt;
  </code></pre>
  
  <p>Do you know why?</p>
  
  <p>Thanks a lot</p>