Using Template Reference variables in Angular 8 with Native Script in Dynamically in ngFor Directive then pass to function

This post is all about the Template Reference variable or Local Reference variable, Let me explain this with an example.

Let’s say we have some basic DOM elements in our template view. It can be anything like

Sometimes you have a requirement of local reference of repeated elements like ngFor

you can’t hard code or take them at the initial level ngOnInit life cycle hooks.

So pass them as reference

<StackLayout*ngFor="let listItem of list; let i=index;" >

<StackLayout (tap)="onCheckbox(listItem, i, tv)" orientation="horizontal" horizontalAlignment="left">



  <Label textWrap="true" verticalAlignment="center" text="Data"></Label>

</StackLayout>

<FlexboxLayout flexDirection="row" justifyContent="space-between" alignItems="center" >

<TextView #tv "[(ngModel)]="listItem.field" returnKeyType="done" autocorrect="true"></TextView>


</FlexboxLayout>

</StackLayout>


Typescript class file function
toggleCheckbox(item, index, textView: TextField) {

      this.list = item;

      this.inActionPNItemIndex = index;

      textView.focus(); // Focused on Check the input field or dismissSoftkeyboard
       }

So you can see how we event focus and close the keyboard access all method od native element