[attr.width.px] can't work in angular9

[DreamLi1314]

Env

• os: win10
• browser: Chrome 80.0.3987.149（x64)
• package.json

    "@angular/animations": "^9.0.7",
    "@angular/cdk": "^9.1.3",
    "@angular/common": "^9.0.7",
    "@angular/compiler": "^9.0.7",
    "@angular/core": "^9.0.7",
    "@angular/forms": "^9.0.7",
    "@angular/localize": "^9.0.7",
    "@angular/material": "^9.1.3",
    "@angular/material-moment-adapter": "^9.1.3",
    "@angular/platform-browser": "^9.0.7",
    "@angular/platform-browser-dynamic": "^9.0.7",
    "@angular/router": "^9.0.7"

Desc

<td *ngIf="hasContent(r, c)"
    [attr.width.px]="model?.cells[r][c]?.width"
    [attr.height.px]="model?.cells[r][c]?.height + (isEditableMode() && last ? 1 : 0)"

Rendering failed because the property was compiled to width.px

[DreamLi1314]

[style.width.px]="model?.cells[r][c]?.width" and [attr.width]="model?.cells[r][c]?.width" is work for me.
But I think this should be a mistake or why doesn't this work in Angular9?

[pkozlowski-opensource]

tl;dr; this is not the valid syntax and it just "happened to work" in previous versions of Angular. As @DreamLi1314 suggested you need to use one of:

• [style.width.px]="expression" if you want to bind to the CSS style property (probably this is what you want);
• [att.width]="expression + 'px'" if you want to bind to the width attribute

What was happening with the VE attribute parser that any suffix would be dropped without any warning ( https://stackblitz.com/edit/angular-9qzvjk) which isn't greatest user experience... I'm going to keep this issue open so we can decide what to do here (probably error when detecting such usage pattern).

[DreamLi1314]

ok, thanks.

[pkozlowski-opensource]

Thinking about it a bit more, I would say that, as the very minimum, we should have compile-time error when encountering [attr.width.px] syntax (that is, we should verify that the attribute binding syntax comes only in the [attr.attrname] flavour and is not accepting suffix.

[vikassrivastava18]

Not working in Angular 11

[style.width.px]="expression"

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