title: How can I get the classes applied via HTML on an Angular 2 component?
body: <p>I want to use a component that I've created as follows:</p>
  
  <pre><code>&lt;vx-alert class="au-upper-center"&gt;
      &lt;p&gt;Upper Center&lt;/p&gt;
  &lt;/vx-alert&gt;
  </code></pre>
  
  <p>Within the <code>vx-alert</code> component I want to pull the list of classes that were applied in the HTML that caused the component to be instantiated. Ultimately I want to either append additional classes to the <code>vx-alert</code> component. I am able to replace the <code>vx-alert</code> component classes very easily (as follows):</p>
  
  <pre><code>@Component({
      moduleId: module.id,
      selector: 'vx-alert',
      templateUrl: 'alert.html'
  })
  export class AlertComponent extends I18N implements OnInit {
      @HostBinding('class') private classList:string;
  
      ngOnInit() {
          this.classList = 'au-ease-in-out au-20000ms';
     }
  }
  </code></pre>
  
  <p>but when <code>this.classList</code> is assigned as new value, the original class(es) set within the HTML code are overwritten... so how can I retrieve the HTML provided classes so that I can concatenate these to my programmatically determined classes?</p>
  
  <p>My Plunker has been updated to use the answer provided by @acdcjunior:</p>
  
  <p><a href="http://embed.plnkr.co/AKYU9ANRm5ogzhlzY9G0/" rel="nofollow">http://embed.plnkr.co/AKYU9ANRm5ogzhlzY9G0/</a></p>