Angular2: about duplicated declarations of Template Reference Variable in a template

Question

I've found some problem of using a Template Reference Variables in a template.

When I declare identical template reference variables on a root level like the below, then the runtime compiler throws errors.

example>

 <input type="text" id="n-1" #myInput />
 <input type="text" id="n-2" #myInput />

However, when duplicated template reference variables are declared as a sub node, then there is no problem.

example>

 <div>
   <input type="text" id="n-1" #myInput />
   <input type="text" id="n-2" #myInput />
 </div>

Here is example code: https://embed.plnkr.co/kqTXfh/

I found that Angular Compiler checks the duplication of declaration of template reference variables.

This is the duplication check function code: https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/template_parser/template_parser.ts#L179-L196

In summary, my question is that can I use duplicated template reference variables in a sub node?

Is this expected result?

Thanks in advance.

Answer 1

Pretty late response. Although responding in case someone comes to this page wondering the same.

As per Official documentation don't define the same variable name more than once in the same template as the runtime value will be unpredictable..

https://angular.io/guide/template-reference-variables#template-variable-scope