angular: Bounds attributes `[attr.xxx]` do not trigger directives

I’m submitting a … (check one with “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 When specifying an attribute directive dynamically (using [attr.attrName]='') on an element the directive is not “triggered” while it is when the attribute directive is added statically.

Expected behavior It should not matter whether adding the attribute dynamically or statically.

Reproduction of the problem http://plnkr.co/edit/WiCrCxlNrUgaBCXkEQkm?p=preview Enter a value with leading or traling whitespaces and click save, in the console the value of the form is logged.

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

Please tell us about your environment:

  • Angular version: 2.0.0-rc.X

  • 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 ]

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

  • Node (for AoT issues): node --version =

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 20
  • Comments: 15 (5 by maintainers)

Most upvoted comments

+1 I’m looking for a way to apply flex-layout directives to the host element.

@mhevery I think the main concern for this issue is that users have no way of specifying that directives should be applied on the host component. E.g. the following will not work:

<app-some-component fxFlex>
	...
</app-some-component>

Thus, we need a way to add directives that should be compiled on the host. This issue might not be the ideal solution, but we need a solution.

See related: https://github.com/angular/flex-layout/issues/76 https://github.com/angular/flex-layout/issues/171

Edit: I now realize this has been consolidated into https://github.com/angular/angular/issues/8785

@tytskyi @DzmitryShylovich thanks for you replying.

but in some scenario. for example,we had customized a directive that dynamically set attributes(properties) with renderer’s setAttribute() or setProperty(). so we must exclude The multiple poperty. for the select element ; that 's tedious. why not make it ‘intelligent’ since select element used frequently and maybe it’s not so difficult to improve it.

It’s not just flex-layout. It should be anything. For example, I’m generating an element via Renderer2 and I’m trying to write in an ngbTooltip. It comes in as all lower-case when I do that, and I don’t get any type of tooltip at that point.