angular: @Directive @Hostbinding cannot set @Input of @Component

@schippie Instead of wrapping md-input inside another component you could inject the component instance from the host element instead.

@Directive({
  selector: '[disable-input]'
})
export class DisableInputtDirective {
  @Input('disable-input') role: string;
  
  constructor(@Host() private hostInput: MdInputComponent) {
    
  }
  ngOnChanges() {
    this.hostInput.disabled = (this.role === 'USER');
  }
}

This should work as a temporary solution I guess. Plnkr- https://plnkr.co/edit/yo17tHkWXkMl37LOJvuG?p=preview

Having the exact same issue here. Setting a component input from outside by using a directive with host binding is an elegant pattern, as it makes component-directive interaction easy and allows for more generalization / decoupling of things.

In addition, I wonder why event binding works though, whereas property binding doesn’t.

Any way of seeing some considerations on this? Attribute directives seem like a perfect fit for redux-like or ngrx/store-like containers attaching inputs/outputs to existing components without redundant dom-nodes in case of using @Component instead of @Directive.

I just encountered this issue, were we wanted a directive to set the checked input for <input type="checkbox"> and <md-checkbox> via @HostBinding. It worked for the former, but not the latter. The error message about not having imported the component module was also really misleading.

@ndunks I also need this functionality for <mat-icon [app-icon]="item.name"></mat-icon> case. What is proper way of modifing parent (host) component inputs from directive? When I modify host component input and call detectChanges or markForCheck from directive then ngOnChanges does not trigger at the host component.

Would the Angular team be able to let us know when/if this will part of one the releases?

Now that we have setInput on ComponentRef I think a viable solution is allowing to inject the host ComponentRef and interact with it like with dynamic components. This will allow the directive to work with the component as if an input was bound. I agree it’s less convenient than HostBinding but it’s much better than what we have now (reference component instance and require input get set as ngOnChanges won’t be invoked).

+1 for this case: <mat-icon [app-icon]="item.name"></mat-icon> AppIcon directive to help choose default icon based on name. I hope this will be fixed.

@rusev That’s quite an elegant solution for now indeed, complete forgot about the @Host for a moment indeed. But that does highlight the problem even clearer. It is possible for a Directive to tell the Host component about this change. So I’ll keep the bug report open for now.