Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ivy] If an @Input *begins* with the word 'class' it is treated as a CSS class #32310

Closed
llimos opened this issue Aug 25, 2019 · 1 comment

Comments

@llimos
Copy link

commented Aug 25, 2019

馃悶 bug report

Affected Package

It's an Ivy bug, I don't know exactly which package

Is this a regression?

Yes, it only happens with Ivy turned on.
Reproduced on 8.2.3

Description

With Ivy turned on, if a component has an @ Input that begins with the word 'class', e.g.
@Input() classesInMySchool: any[]
it is treated as a CSS class instead of a regular property and it is not included in the list of inputs.
Any code using this property doesn't work - the value is undefined.

The compiled form looks like

    const ctx_r18467 = _angular_core__WEBPACK_IMPORTED_MODULE_0__["傻傻nextContext"]();
    _angular_core__WEBPACK_IMPORTED_MODULE_0__["傻傻classMap"](ctx_r18467.classes);
    _angular_core__WEBPACK_IMPORTED_MODULE_0__["傻傻stylingApply"](); 

It appears to be based on the name of the input rather than the name of the class property in the event that they are different.

馃敩 Minimal Reproduction

Minimal reproduction here: https://github.com/llimos/angular-class-prefix-bug

Steps to reproduce:

  1. Either build or ng serve with Ivy turned on
  2. See that the 'classesInMySchool' property didn't make it through to the child component, so 'it didn't work' is displayed
  3. Switch off ivy in tsconfig.app.json
  4. Repeat step 2 and see that it works normally - 'child works' is displayed

馃敟 Exception or Error

None

馃實 Your Environment

Angular Version:


Angular CLI: 8.3.0
Node: 10.15.1
OS: win32 x64
Angular: 8.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.0
@angular-devkit/build-angular     0.803.0
@angular-devkit/build-optimizer   0.803.0
@angular-devkit/build-webpack     0.803.0
@angular-devkit/core              8.3.0
@angular-devkit/schematics        8.3.0
@angular/cli                      8.3.0
@ngtools/webpack                  8.3.0
@schematics/angular               8.3.0
@schematics/update                0.803.0
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?

We are working on educational software for schools, so as you can imagine there are rather a lot of properties beginning with the word 'class' and changing them all as a workaround is unfeasible.

@atscott atscott added the comp: ivy label Aug 26, 2019
@ngbot ngbot bot added this to the needsTriage milestone Aug 26, 2019
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Aug 29, 2019
@kara kara added the comp: core label Aug 29, 2019
crisbeto added a commit to crisbeto/angular that referenced this issue Aug 30, 2019
Fixes Ivy picking up property bindings that start with `class` or `style` as if they're style bindings.

Fixes angular#32310
@crisbeto crisbeto self-assigned this Aug 30, 2019
crisbeto added a commit to crisbeto/angular that referenced this issue Aug 30, 2019
Fixes Ivy picking up property bindings that start with `class` or `style` as if they're style bindings.

Fixes angular#32310
crisbeto added a commit to crisbeto/angular that referenced this issue Sep 5, 2019
Fixes Ivy picking up property bindings that start with `class` or `style` as if they're style bindings.

Fixes angular#32310
@matsko matsko closed this in 62d92f8 Sep 5, 2019
sabeersulaiman added a commit to sabeersulaiman/angular that referenced this issue Sep 6, 2019
鈥ngular#32421)

Fixes Ivy picking up property bindings that start with `class` or `style` as if they're style bindings.

Fixes angular#32310

PR Close angular#32421
arnehoek added a commit to arnehoek/angular that referenced this issue Sep 26, 2019
鈥ngular#32421)

Fixes Ivy picking up property bindings that start with `class` or `style` as if they're style bindings.

Fixes angular#32310

PR Close angular#32421
@angular-automatic-lock-bot

This comment has been minimized.

Copy link

commented Oct 6, 2019

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can鈥檛 perform that action at this time.