feat(migrations): add migration to convert ngClass to use class #61971
Conversation
| before: `<div [ngClass]="{'active': isActive}"></div>`, | ||
| after: `<div [class.active]="isActive"></div>`, |
There was a problem hiding this comment.
This should be migrated to <div [class]="{'active': isActive}"></div>
| before: `<div [ngClass]="{'class1': condition1, 'class2': condition2}"></div>`, | ||
| after: `<div [class.class1]="condition1" [class.class2]="condition2"></div>`, |
There was a problem hiding this comment.
Same here, it should be <div [class]="{'class1': condition1, 'class2': condition2}"></div>
| await verifyDeclaration({ | ||
| before: `<div [ngClass]="{'class1 class2': condition}"></div>`, | ||
| after: `<div [class.class1]="condition" [class.class2]="condition"></div>`, |
There was a problem hiding this comment.
I think we should discuss if this migration should be behind a flag.
It can be far from ideal in projects with tailwind when there are several classnames in the key. (could be 10+)
There was a problem hiding this comment.
Ok, how should we discuss it?
There was a problem hiding this comment.
We'll discuss it with the team soon, we'll let you know.
| await verifyDeclaration({ | ||
| before: `<div [ngClass]="{'admin-panel': isAdmin, 'user-dense': isDense}"></div>`, | ||
| after: `<div [class.admin-panel]="isAdmin" [class.user-dense]="isDense"></div>`, |
There was a problem hiding this comment.
same should be <div [class]="{'admin-panel': isAdmin, 'user-dense': isDense}"></div>
|
@JeanMeche Thanks for the feedback. I'll resolve them. |
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Added Migration Feature to migrate ngClass to class
What is the current behavior?
Added Migration Feature to migrate ngClass to class
Issue Number:
#61661
What is the new behavior?
It'll migrate ngClass to class bindings to follow the style guide Prefer class over ngClass
Now
<div [class.admin]="isAdmin" [class.dense]="density === 'high'">Before
<div [ngClass]="{admin: isAdmin, dense: density === 'high'}">Does this PR introduce a breaking change?