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
So you can see how we event focus and close the keyboard access all method od native element

--

--

Software Engineer | Bharat Swabhiman Patanjali Social Activist | Speaker | Motivator | Yoga Trainer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ACHARYA ANIL SURYAVANSHI

Software Engineer | Bharat Swabhiman Patanjali Social Activist | Speaker | Motivator | Yoga Trainer