Template parser throws error when using custom properties for component

As far I know, component selector can be any proper css selector. But, usually it is just an element tag name. I’ve created some tests of how Angular is pushing values of custom properties to elements. And when I try to set something like this:

<h1 [customName]="'custom name'"></h1>

Parser throws an error: Can’t bind to ‘customName’ since it isn’t a known native property Ok. I understand that we can not set custom properties which are not in prototype chain of native element.

If I change element to some custom tag name, it works:

<hello-world [customName]="'custom name'"></hello-word>

I think this is done like that because of web components lifecycle, but also for utilizing Components. However, as I mentioned above, Components can use other css selector than tag name. For example we can create component with that decorator:

@Component({
  selector: "#hello-world"
})

Then we can use any tag with proper id. This can be also native element. If we do so, parser throws an error:

Can't bind to 'customName' since it isn't a known native property ("
    <div id="hello-world" [ERROR ->][customName]="'custom name'"></div>

This is really confusing. If components should be created as custom tags, selector should be used as tag name, not css selector. If I can create component with css selector, then parser should not throws error for custom properties with native elements.

Link to “working” example.

[smalluban]

Yes. There is no documentation yet for selector (https://angular.io/docs/ts/latest/api/core/ComponentMetadata-class.html), so I think this will be documented and the problem will be gone 😃

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}