Add extended diagnostic to warn when an attribute is not interpreted as a binding

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.

[pkozlowski-opensource]

@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}}" sets x attribute and attr.x="static" sets attr.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 x attribute for the attr.x="static" case.

[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.}