angular: @HostBinding not working on @Input properties

I’m submitting a …

[x] bug report
[ ] feature request
[ ] support request

Current behavior

When defining a @HostBinding on an attribute directive referring to an @Input property of the host component, it does not update the host property after changing the value.

Expected/desired behavior

@HostBinding should probably apply to all properties of the host, including @Input properties.

Reproduction of the problem

Plunker: https://embed.plnkr.co/kQEKbT/ Stackoverflow question and answer with solution using a template reference variable: http://stackoverflow.com/questions/38771403/how-to-use-hostbinding-with-input-properties-in-angular-2

What is the expected behavior?

In the example above: the attribute directive should feed the input property of the component.

What is the motivation / use case for changing the behavior?

See Plunker above. This could be useful when you want to create a directive that feeds the input of a component.

Please tell us about your environment:

Angular version: 2.0.0-rc.4
Browser: Chrome 51 (likely applies to all)
Language: TypeScript 1.8.10 (likely applies to all)

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 15
Comments: 22 (12 by maintainers)

Links to this issue

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

Most upvoted comments

Updated the plunker to show that it won’t work in that way:

it works http://prntscr.com/drcro1 u just need to set it to null instead of false if u want to remove it from the element

I might just have to open a separate ticket

I think it makes sense

DzmitryShylovich on Jan 4, 2017

It works fine with

@HostBinding('attr.disabled') disabled: boolean;
and
@HostBinding('class.disabled') disabled: boolean;

DzmitryShylovich on Jan 4, 2017

@abierbaum I think the workaround is quite easy:

@HostBinding('class.expanded') 
expandedClass:boolean = false;
@Input() set expanded(val:boolean) => this.expandedClass = val;

zoechi on Nov 23, 2016

@pkozlowski-opensource @schippie Here is a shorter example that shows a hostbinding and input we just came across:

@Component({
   selector: 'expandable-comp',
   template: '<div><ng-content></ng-content></div>'
)}
export class ExpandableComponent {
   @HostBinding('class.expanded') @Input() expanded: boolean = false;
}

We wanted to have an input that when set would change a class on the host component (‘expandable-comp’). ~~From what I can tell this doesn’t work in Angular 2 right now and I don’t see an easy or direct workaround.~~

Note: After looking at it closer, this syntax does work correctly.

abierbaum on Nov 23, 2016