How to use @HostBinding with @Input properties in Angular 2? : <p>(Angular 2 RC4)</p>

<p>With <a href="https://angular.io/docs/ts/latest/api/core/index/HostBinding-var.html">@HostBinding</a> we should be able to modify properties of the host, right? My question is, does this apply to @Input() properties as well and if so, what is the correct usage? If not, is there another way to achieve this?</p>

<p>I made a Plunker here to illustrate my problem: <a href="https://embed.plnkr.co/kQEKbT/">https://embed.plnkr.co/kQEKbT/</a></p>

<p>Suppose I have a custom component:</p>

<pre><code>@Component({
  selector: 'custom-img',
  template: `
    &lt;img src="{{src}}"&gt;
  `
})
export class CustomImgComponent {
  @Input() src: string;
}
</code></pre>

<p>And I want to feed the src property with an attribute directive:</p>

<pre><code>@Directive({
  selector: '[srcKey]'
})
export class SrcKeyDirective implements OnChanges {

  @Input() srcKey: string;
  @HostBinding() src;

  ngOnChanges() {
    this.src = `https://www.google.com.mt/images/branding/googlelogo/2x/${this.srcKey}_color_272x92dp.png`;
  }
}
</code></pre>

<p>Why can't this directive change the [src] input property of the custom component?</p>

<pre><code>@Component({
  selector: 'my-app',
  directives: [CustomImgComponent, SrcKeyDirective],
  template: `&lt;custom-img [srcKey]="imageKey"&gt;&lt;/custom-img&gt;`
})
export class AppComponent {
  imageKey = "googlelogo";
}
</code></pre>

<p>Thanks!</p>
