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
https://stackblitz.com/edit/angular-ivy-ybks1w?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts
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.
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.foosyntax 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
https://stackblitz.com/edit/angular-ivy-ybks1w?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run
ng version)