8000 @Directive @Hostbinding cannot set @Input of @Component · Issue #13776 · angular/angular · GitHub
[go: up one dir, main page]

Skip to content
@Directive @Hostbinding cannot set @Input of @Component #13776
@nschipperbrainsmith

Description

@nschipperbrainsmith

I'm submitting a bug

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
This is an issue similar to #10499. There seems to be a problem whereby an @Directive cannot set an @Component input property. Meaning if you apply a directive to the component's tag and have said directive set the component's input property using an @Hostbinding it throws the following error:

Can't bind to 'X' since it isn't a known property of 'X'.

Expected behavior
I hoped it would be possible to set an Component's input property using a simple Directive. Though I would also understand that if this is by design. If it's by design then i think the error message reported back to the user should be improved as it doesn't clearly indicate why it isn't work as the programmer might expect it to work.

Minimal reproduction of the problem with instructions
https://plnkr.co/edit/V2KBlhbv7AciGfEi0lkE

What is the motivation / use case for changing the behavior?
There are a few use cases that would be simplified by having the ability for having an @Directive being able to set the component's Input property without modifications to the source Component. One of the use cases highlighted in the example above resolves around the md-input from @angular/material2 (using an external library over which you have no influence). Where a [disabled] property can be set indicating if the component is disabled. We have wanted to use this together with an role checking directive to disable / enable an input based on the user's role / permissions.

There are of course other ways like wrapping the md-input and all of the other input's @angular/material2 provides in our own custom input value access-or components which would do this for us but we thought it would be easier to go down this route instead of wrapping all other inputs.

  • Angular version: 2.0.X
    2.4.1

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    all

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    all

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0