fix(compiler): correctly parse attributes with a dot in the name

[n0th1ng-else]

Previously the compiler would ignore everything in the attribute
name after the first dot. For example
<div [attr.someAttr.attrSuffix]="var"></div>
is turned into <div someAttr="varValue"></div>.

This commit ensures that whole attribute name is captured.
Now <div [attr.someAttr.attrSuffix]="var"></div>
is turned into <div someAttr.attrSuffix="varValue"></div>

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

What is the current behavior?

element
<div [attr.someProp.propSuffix]="var"></div>
turns into
<div someProp="varValue"></div> (note the propSuffix is cut)

Issue Number: #31334

What is the new behavior?

element
<div [attr.someProp.propSuffix]="var"></div>
result this html
<div someProp.propSuffix="varValue"></div> (note the propSuffix now exists)

Does this PR introduce a breaking change?

• Yes
• No

Other information

[petebacondarwin]

LGTM - can you modify the commit message slightly:

fix(compiler): correctly parse attributes with a dot in the name

Previously the compiler would ignore everything in the attribute
name after the first dot. For example
<div [attr.someAttr.attrSuffix]="var"></div>
is turned into <div someAttr="varValue"></div>.

This commit ensures that whole attribute name is captured.
Now <div [attr.someAttr.attrSuffix]="var"></div>
is turned into <div someAttr.attrSuffix="varValue"></div>.

[n0th1ng-else]

@petebacondarwin thank you! I have updated the commit message 👍

[ngbot]

I see that you just added the PR action: merge label, but the following checks are still failing:
     status "google3" is failing

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

[n0th1ng-else]

Is it something I need to do from my side, @petebacondarwin? Not sure I can understand the falling status correctly

[petebacondarwin]

@n0th1ng-else - no we just need a Googler (perhaps @alxhub ?) to run a presubmit to test that it works inside Google's repository before it can be merged.

[atscott]

presubmit
ivy presubmit

[atscott]

Hi @n0th1ng-else, this seems to break [attr.height.px]="16". Previously, this would result in height="16px" but now you get height.px="16".

[petebacondarwin]

Hmm, that is a bit of a problem. I'm surprised that we don't have tests for this in the framework!

The height.px thing is an Angular custom syntax, but attribute names with dots in them are valid.

It might be that we can avoid dotted names for some subset of well-known attributes, like height?

[atscott]

Ah, sorry this was incorrect. After some digging, what actually happened was an incorrect configuration in the failing component. It has [attr.height.px]="16" on an svg element. The way it's working right now, this .px was ignored so the result was height="16". This is correct for an svg element, but this change made it height.px="16" which is not correct. So the component's template actually needs to be updated. @alxhub - does this need to be added to the breaking changes list? It seems like there may potentially be cases in VE that are relying on broken behavior.

[alxhub]

I think we should push this to 10.0 unfortunately. We're in RC now, I don't think we should introduce more breaking changes unless there are issues with the current RC that we cannot address otherwise. We could potentially investigate doing this as a fix if we can find a way to make it non-breaking.

[petebacondarwin]

I don't think 9.1 can accept breaking changes...

[ngbot]

I see that you just added the PR action: merge label, but the following checks are still failing:
     status "google3" is failing

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

[atscott]

Discussed with @alxhub and given that we only found one occurrence for [attr.attribute.suffix] in google3 and we've fixed it in preparation for this PR, we're okay to merge.

[angular-automatic-lock-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.}