Using this keyword in templates will use template varibales instead of component variables. #55115
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
No
Description
When defining a variable inside of a template (for example setting a variable with $index in a loop), using this. in combination with that variable will resolve to the local template variable and not the component variable.
@Component({
selector: "app",
standalone: true,
template: `
@for (item of list; track item; let idx = $index) {
{{ this.idx }} {{ item }}
}
`,
})
export class App {
public list = ["hello"];
public idx = "this should be idx";
}This shows 0 hello instead of this should be idx hello.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-iq5cdb?file=src%2Fmain.ts
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 17.3.0
Node: 20.10.0
Package Manager: npm 9.6.4
OS: win32 x64
Angular: 17.3.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.0
@angular-devkit/build-angular 17.3.0
@angular-devkit/core 17.3.0
@angular-devkit/schematics 17.3.0
@schematics/angular 17.3.0
rxjs 7.8.1
typescript 5.4.2
zone.js 0.14.4
Anything else?
We noticed this by accident, obviously not a show-stopper, we just have a co-worker who's convinced he should use the this keyword in templates and doesn't want to stop.