title: Angular2 Set CSS Class To Component Variable Value
body: <p>I'm trying to do something that sounds simple but I'm not finding any examples that meet my needs.  I have a simple component that renders an ajax spinner, but I want to allow consumers to pass in a class or multiple classes (seperated by space) as input params to the component and have the components view template add the classes to an img tag in the template.  Here is my component:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
      moduleId: module.id,
      selector: 'loading',
      templateUrl: 'loading.html',
      inputs: ['imgClass']
  
  })
  
  export class LoadingComponent {
      @Input() imgClass: string;
  }
  </code></pre>
  
  <p>Here is the view template:</p>
  
  <pre><code>&lt;img [ngClass]="{ imgClass : true}" src="./Content/img/loading_spinner.gif" /&gt;
  </code></pre>
  
  <p>Here is how I want to use it:</p>
  
  <pre><code> &lt;div class="row" *ngIf="isLoading"&gt;
          &lt;div class="col-xs-4"&gt;&lt;/div&gt;
          &lt;div class="col-xs-4 no-pad"&gt;&lt;loading [imgClass]="center-block"&gt;&lt;/loading&gt;&lt;/div&gt;
          &lt;div class="col-xs-4"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So i want center-block to be added to the img tag through the loading component but It doesn't seem to be working. </p>
  
  <p>When the app loads the markup is this:
  <a href="https://i.stack.imgur.com/xwaHh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xwaHh.png" alt="enter image description here"></a> </p>
  
  <p>It's not getting the imgClass variable value it's adding the literal 'imgClass' as the class.</p>