Skip to content

feat(compiler): check that ng-container don't have class bindings - #70808

Open
JeanMeche wants to merge 1 commit into
angular:mainfrom
JeanMeche:container-class
Open

feat(compiler): check that ng-container don't have class bindings #70808
JeanMeche wants to merge 1 commit into
angular:mainfrom
JeanMeche:container-class

Conversation

@JeanMeche

@JeanMeche JeanMeche commented Sep 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Those are never applied and we should throw at compiler time.

class attributes are still supported because we allow them for content projection purposes.

@angular-robot angular-robot Bot added detected: feature PR contains a feature commit area: compiler Issues related to `ngc`, Angular's template compiler labels Sep 18, 2026
@ngbot ngbot Bot added this to the Backlog milestone Sep 18, 2026
@JeanMeche
JeanMeche force-pushed the container-class branch 2 times, most recently from e44228d to 28ac0ee Compare September 18, 2026 21:00
@JeanMeche JeanMeche added state: blocked on G3 cleanup This change requires a G3 cleanup and removed detected: feature PR contains a feature commit labels Sep 22, 2026
@angular-robot angular-robot Bot added the detected: feature PR contains a feature commit label Sep 22, 2026
@JeanMeche
JeanMeche requested a review from mattrbeck September 22, 2026 22:25
@JeanMeche
JeanMeche marked this pull request as ready for review September 22, 2026 22:25
@JeanMeche
JeanMeche force-pushed the container-class branch 2 times, most recently from 40b0416 to a45b5fd Compare September 22, 2026 22:52
@JeanMeche JeanMeche changed the title feat(compiler): check that ng-container don't class bindings feat(compiler): check that ng-container don't have class bindings nor aria attributes Sep 22, 2026
@JeanMeche JeanMeche changed the title feat(compiler): check that ng-container don't have class bindings nor aria attributes feat(compiler): check that ng-container don't have class bindings Sep 23, 2026
@JeanMeche
feat(compiler): check that ng-container don't have class bindings
5fe7be1 
Those are never applied and we should throw at compiler time.
mattrbeck
mattrbeck approved these changes Sep 28, 2026
View reviewed changes

@mattrbeck mattrbeck left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the partial linker re-parse templates? I wonder if adding this change without an exemption in the partial linker will cause breakages when parsing dependencies which still bind the class on ng-container

Comment thread packages/compiler/src/render3/r3_template_transform.ts
@@ -242,6 +242,11 @@ class HtmlAstToIvyAst implements html.Visitor {
`Attribute bindings are not supported on ng-container. Use property bindings instead.`,

@mattrbeck mattrbeck Sep 28, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If a user wrote [attr.class]="foo" today, they'd get an error telling them to use [class]="foo", which would now also error. Maybe we can report these errors in a way that's a little more clear?

Comment thread packages/compiler/src/render3/r3_template_transform.ts
);
} else if (
bound.type === BindingType.Class ||
(bound.type === BindingType.Property && bound.name === 'class')

@mattrbeck mattrbeck Sep 28, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this be breaking if a directive has a "class" input today?

Comment thread packages/compiler/src/render3/r3_template_transform.ts
);
} else if (
bound.type === BindingType.Class ||
(bound.type === BindingType.Property && bound.name === 'class')

@mattrbeck mattrbeck Sep 28, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also check if bound.name === 'style'?

Comment thread packages/compiler/src/render3/r3_template_transform.ts Resolved
@JeanMeche JeanMeche mentioned this pull request Nov 5, 2026
Merged
@JeanMeche JeanMeche removed the state: blocked on G3 cleanup This change requires a G3 cleanup label Nov 5, 2026
JeanMeche added a commit to JeanMeche/angular that referenced this pull request Nov 7, 2026
@JeanMeche
refactor(compiler): check that ng-container don't have class bindings
1344b06 
This is the same change as angular#70808 but for g3 only due to its breaking nature.
@SkyZeroZx SkyZeroZx mentioned this pull request Nov 8, 2026
Open
@JeanMeche JeanMeche mentioned this pull request Nov 8, 2026
Closed
6 of 14 tasks
@Flarette

Flarette commented Nov 8, 2026

Copy link
Copy Markdown
Contributor

This is one case of #71881. #71882 reports class bindings on <ng-container> as NG8031, along with style, event, and other bindings that <ng-container>, <ng-template>, and <ng-content> ignore. It runs in the type checker, so the linker concern doesn't apply, and it skips bindings a directive claims. #71884 makes it an error, like the TODO(v23) in #71844.

If both land, class bindings get the parse error and NG8031, so this needs reconciliation with #71882 and #71884 before merge.

thePunderWoman pushed a commit that referenced this pull request Nov 10, 2026
@JeanMeche @thePunderWoman
refactor(compiler): check that ng-container don't have class bindings
5cd01d6 
This is the same change as #70808 but for g3 only due to its breaking nature.
thePunderWoman pushed a commit that referenced this pull request Nov 10, 2026
@JeanMeche @thePunderWoman
refactor(compiler): check that ng-container don't have class bindings
85e1962 
This is the same change as #70808 but for g3 only due to its breaking nature.

(cherry picked from commit 5cd01d6)
@JeanMeche JeanMeche removed this from the Backlog milestone Nov 11, 2026
@JeanMeche JeanMeche added this to the v23 candidates milestone Nov 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mattrbeck mattrbeck mattrbeck approved these changes

Assignees

No one assigned

Labels

area: compiler Issues related to `ngc`, Angular's template compiler breaking changes detected: feature PR contains a feature commit state: blocked

Projects

None yet

Milestone

v23 candidates

Development

Successfully merging this pull request may close these issues.

3 participants

@JeanMeche @Flarette @mattrbeck