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

Answer 1

BEWARE on using get with hostbinding.

At least I an endless recursion (thousands of cycles). Put a console.log in the get function to check:

@HostBinding('@someAnim') get whatever() {
    console.log('#### traffic.....');
    return true;
}

I even got that trouble, when just changing some class (so nothing around fancy Angular animation) and not even relying on any other class member whatsoever:

@HostBinding('class.foobar') get _____() {
    console.log('#### more traffic.....');
    return true;
}

An addition, it doesn't hurt to have this in your component while developing (as a “free flow canary”):

ngOnChanges(changes: SimpleChanges) {
    console.log('#### more traffic.....');
}

You should only see one log entry per, say, state-change and instantiated component, anyway not thousands...

—At last— I had luck with this one:

• distinct variable for incoming (@Input) and outgoing (@HostBinding)
• changing the outgoing upon change
• → no „free flow“

    @Input() animTileAttrib = false;
    @HostBinding('@animTile') paramPack: AnimParams = { value: false, params: {}};

    ngOnChanges(changes: SimpleChanges) {
        console.log('#### traffic.....');
        if ('animTileAttrib' in changes) {
            this.paramPack = { value: changes.animTileAttrib.currentValue, params: {} };
        }
    }

Answer 2

(1) declare hostbinding property with input property.

@HostBinding('attr.aaa') @Input() aaa: boolean = false;

(2) set hostbinding property to input property

@Input() aaa: string;
@HostBinding('attr.bbb') ccc: string;

ngOnInit(){
  this.ccc = this.aaa;
}

Answer 3

You need to combine the decorators like this:

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

Answer 4

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

@Input() settings: Settings;

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

Answer 5

@HostBinding() doesn't create property bindings to properties of the host component. That might be worth a bug report though ;-)

I got it working by a workaround with exportAs and a template variable but that is quite ugly. https://plnkr.co/edit/TobNVn?p=preview

After some consideration, I think it should work. Otherwise I wouldn't know what @HostBinding() src; would do at all.

@HostBinding('attr.src') src; or @HostBinding('class.src') src; are the more common cases.