Repository navigation
Add extended diagnostic to warn when an attribute is not interpreted as a binding #46137
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
Angular does not properly bind an attribute when using attr.foo syntax if there is no interpolation present in the value.
For example, this does not work:
<div attr.foo="bar"></div> <!-- erroneously keeps the attribute as "attr.foo" -->
This DOES work:
<div attr.foo="{{myProp}}"></div>
This also works:
<div [attr.foo]="'bar'"></div>
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
The attribute is not set properly on the element using `attr.foo` syntax when no interpolation is present.
Please provide the environment you discovered this bug in (run ng version)
The reproduction link is using Angular 13, but I also encountered this in my project which produces the following output for `ng version`:
Angular CLI: 12.2.16
Node: 14.19.3
Package Manager: npm 6.14.17
OS: darwin x64
Angular: 12.2.16
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, localize
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1202.16
@angular-devkit/build-angular 12.2.16
@angular-devkit/core 12.2.16
@angular-devkit/schematics 12.2.16
@angular/cdk 12.2.13
@schematics/angular 12.2.16
ng-packagr 12.2.7
rxjs 6.6.3
typescript 4.3.5
webpack 5.50.0
### Anything else?
I encountered this in my project previously on Angular 11 as well.
Activity
[-]String attribute bindings don't work properly when no interpolation is used[/-][+]Add extended diagnostic to warn when an attribute is not interpreted as a binding[/+]atscott commentedon May 26, 2022
This is working as expected. There's nothing in the attribute assignment that indicates it's a binding. A binding in the value of an attribute makes the attribute assignment a binding.
[attr.foo]is also an attribute binding.I've updated the title to make this a feature request for the extended diagnostics feature to warn when
attr.xis not interpreted as a binding. This could also includestyle.andclass.pkozlowski-opensource commentedon May 26, 2022
@atscott yeh, I didn't close this one as I can totally see how it could be confusing. For a user it is not at all clear why
attr.x="{{exp}}"setsxattribute andattr.x="static"setsattr.x. In a sense the left-hand side of the assignment (target) changes based on the rhs and I would consider this surprising. So it "works as designed" but probably not "as expected".As an alternative to warning we could just set the
xattribute for theattr.x="static"case.11 remaining items
angular-automatic-lock-bot commentedon Jul 31, 2022
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.