Skip to content

Comments

feat(compiler-cli): add extended diagnostic for template reference shadowing class member#67226

Open
yogeshwaran-c wants to merge 1 commit intoangular:mainfrom
yogeshwaran-c:feat/template-ref-shadows-class-member
Open

feat(compiler-cli): add extended diagnostic for template reference shadowing class member#67226
yogeshwaran-c wants to merge 1 commit intoangular:mainfrom
yogeshwaran-c:feat/template-ref-shadows-class-member

Conversation

@yogeshwaran-c
Copy link

What kind of change does this PR introduce?

Feature (new extended template diagnostic)

What is the current behavior?

When a template reference variable (#name) has the same name as a component class property or method, there is no warning. This can lead to confusion, because inside the template the reference variable takes precedence over the class member.

For example:

@Component({
  template: '<div #name>{{ name }}</div>'
})
export class MyComponent {
  name = 'Angular';
}

Here {{ name }} resolves to the template reference (the <div> element), not the string 'Angular'.

Closes #45227

What is the new behavior?

A new extended template diagnostic (templateReferenceShadowsClassMember, NG8119) warns when a template reference variable shadows a component class member. The warning covers:

  • Direct class properties and methods
  • Inherited properties from base classes
  • Private, protected, and public members

The diagnostic is emitted as a warning (not an error), consistent with other extended diagnostics.

Additional context

A previous PR (#48658) attempted this but was closed due to missing cases (inherited properties, template variable scoping). This implementation:

  • Uses TypeChecker.getTypeAtLocation() + getProperty() which automatically resolves inherited members
  • Reports on the keySpan of the reference for precise source mapping
  • Includes comprehensive tests covering inheritance, access modifiers, methods, and negative cases

…adowing class member

Add a new extended template diagnostic that warns when a template reference
variable (#name) has the same name as a property or method on the component
class. This can cause confusion since the template reference takes precedence
over the class member within the template.

The diagnostic covers:
- Direct class properties and methods
- Inherited properties from base classes
- Private, protected, and public members

Fixes angular#45227
@pullapprove pullapprove bot requested a review from AndrewKushnir February 23, 2026 20:15
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: compiler Issues related to `ngc`, Angular's template compiler labels Feb 23, 2026
@ngbot ngbot bot added this to the Backlog milestone Feb 23, 2026
@JeanMeche JeanMeche requested review from JeanMeche and removed request for AndrewKushnir February 23, 2026 20:20
@JeanMeche
Copy link
Member

While I get the purpose of this check, I'm afraid it's in the scope of "very breaking" to "too breaking for us to land" (as shown by our internal tests).

@Harpush
Copy link

Harpush commented Feb 24, 2026

Isn't it fine as you can access with this? I mean a very common approach is doing:
@let abc = this.abc()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

extended diagnostics: show warning if component variable is shadowed by template reference

3 participants