ng-container: need warning when ng-template variable matches component variable

🚀 feature request

Relevant Package

@angular/core, I think. Wherever the structural directives live.

Description

If a component variable and an ng-template variable use the same name and are used within the same ng-template section, then the ng-template variable will always be used. We need to indicate this behavior to the user.

Describe the solution you’d like

It would be great if we could get a warning in this situation.

Describe alternatives you’ve considered

Using unique names for the variables resolves the situation.

See this Stackblitz example. The important code is as follows:

@Component({`
  selector: 'hello',
  template: `
  <ng-container> *ngIf='name;then name else donthandlename' </ng-container>
  <ng-template #name> Hello {{ name }} </ng-template>
  <ng-template #donthandlename> Hello unknown person </ng-template>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

The basic idea is to use one template if the class’s input variable ‘name’ has been given to the component, and to use a different template if ‘name’ is not defined. When we get to ‘Hello {{ name }}’, the definition of ‘name’ seems ambiguous: it could refer to the component’s input variable, or it could refer to the TemplateRef being used in the enclosing template:

<ng-template #name>

As it turns out, Angular uses the TemplateRef from ng-template, not the input variable. By itself, that isn’t necessarily broken, but it would be great if ‘name’ in ‘Hello {{ name }}’ was underlined in red in order to highlight the ambiguity. (I’m using Visual Studio Code, by the way.)

[JamesHenry]

Any linting capabilities in this domain would have to be built on top of the angular compiler for this very reason

[angular-automatic-lock-bot[bot]]

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.}