Angular2: @HostBinding or host: {}? : <p>I was wondering if there was a drastic difference (and if there is, what is it?) between using <code>@HostBinding</code> and the <code>host</code> attribute of the component ?</p>

<p>I have been asking myself that question while I was using animations because I was in these cases (which look rather close) : </p>

<pre><code>@Component({
  selector: 'mycomponent',
  animations: [
    trigger('myTransition', [
      state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive =&gt; active', animate('100ms ease-in')),
    transition('active =&gt; inactive', animate('100ms ease-out'))
  ])],
  host: {
    '[@myTransition]': '',
   },
})
</code></pre>

<p>OR</p>

<pre><code>@Component({
  selector: 'mycomponent',
  animations: [
    trigger('myTransition', [
      state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive =&gt; active', animate('100ms ease-in')),
    transition('active =&gt; inactive', animate('100ms ease-out'))
  ])],
})

export class MyComponent {
  @HostBinding('@myTransition') get myTransition() {
    return '';
  }
}
</code></pre>

<p>I then thought that it my might be the new way of host binding.</p>

<p>Thanks in advance for your advice and input ;)</p>
