CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
Vahid Najafi
Vahid Najafi

Reputation: 5263

Angular multiple local reference in a list view for each item

I'm using nativescript-angular for my project. Here there is an implementation for zooming. It uses local reference (#item) and @ViewChild decoration in order to accessing the element:

<GridLayout (pan)="onPan($event)" (pinch)="onPinch($event)" (doubleTap)="onDoubleTap($event)" class="page">
<StackLayout #item width="200" height="200" backgroundColor="Green">
    <Image src="res://icon" width="50" height="50" class="p-20"></Image>        
    <!-- all children ot the element #item will scale accordingly-->
</StackLayout>
<TextView #status row="1" editable="false"></TextView>

And in component:

@ViewChild("item") angularItem: ElementRef;

It works fine. But I want to use it in a ListView. My list view is something like this:

<ListView [items]="items" class="list-group">
    <ng-template let-item="item">
        <Label [text]="item.name" class="list-group-item"></Label>
    </ng-template>
</ListView>

How can I define local references for each item that I could be able to zoom each element?

Upvotes: 0

Views: 753

Answers (1)

bhavin jalodara
bhavin jalodara

Reputation: 1530

you can get the object reference from the arguments passed to the event using args.object.

in your case something like this.

<ListView [items]="items" class="list-group">
    <ng-template let-item="item">
        <Label (pan)="onPan($event)" [text]="item.name" class="list-group-item"></Label>
    </ng-template>
</ListView>

and you can get Label reference in onPan function by using $event.object

onPan(args){
  let label=<Label>args.object;
}

Upvotes: 2

Related Questions