How to use @HostBinding with @Input properties in Angular 2?

Question

(Angular 2 RC4)

With @HostBinding 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?

I made a Plunker here to illustrate my problem: https://embed.plnkr.co/kQEKbT/

Suppose I have a custom component:

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

And I want to feed the src property with an attribute directive:

@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`;   } } 

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

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

Thanks!

Answer 1

You need to combine the decorators like this:

@HostBinding('class.active') @Input() active: boolean = false;

Answer 2

If your @Input is an object, you can do:

@Input() settings: Settings;  @HostBinding('class.active') public get isActive(): boolean {   return this.settings.isActive; }