*ngIf and local template variables

Question

Could someone please explain what\'s behind the following behavior?

Say we have an Angular 2 component that has a _model object. Then in the template we

Answer 1

We can reference a local template variable on the same element, on a sibling element, or on any child elements. -- ref

*ngIf becomes/expands to

<template [ngIf]="_model">
    <input type="text" class="form-control" required [(ngModel)]="_model.firstName"
     ngControl="test1" #myInput>
</template>

So local template variable #myInput can only be referenced inside the template block (i.e., sibling and/or child elements). Hence you would have to put any HTML that wants to reference the local template variable inside the template:

<template [ngIf]="_model">
   <input type="text" class="form-control" required [(ngModel)]="_model.firstName"
    ngControl="test1"  #myInput >
   <br>Class (this works): {{myInput?.className}}
</template>

Plunker

---

If you need to show something outside the template block related to the input, use @ViewChildren('myInput') list:QueryList<ElementRef> and then subscribe to changes:

ngAfterViewInit() {
   this.list.changes.subscribe( newList =>
      console.log('new list size:', newList.length)
   )
}

See more QueryList methods in the API doc.