In NativeScript with Angular2 get element value

Question

I have a list, and I want to get the value of the list item.

The view is as follows

<ListView  [items]="myItems" (itemTap)="onItemTap($event)">
<template let-item="item" let-i="index" let-odd="odd" let-even="even">
    <StackLayout [class.odd]="odd" [class.even]="even">
        <Label #myFoo id="grocery-list" [text]='"Value is: " + i'></Label>
    </StackLayout>
</template>

In typescript I have the following

import { Component,ViewChild,ElementRef } from "@angular/core";
import {topmost} from "ui/frame";
import {ListView} from "ui/list-view";
 export class AppComponent {

 @ViewChild("myFoo") myFooRef: ElementRef;

    public myItems = [];
    constructor() {
          this.myItems.push("1");
          this.myItems.push("2");
          this.myItems.push("3");

   }

    onItemTap(event){

    }
}

I can do the following to get the value

    onItemTap(event){
    let itemValue = this.myItems[event.index];
     console.log(itemValue);     
    }

This will get the value in the array. But this will return the value in the array only.

As you can see in the view I have the string Value is appended to the value.

So how can I access the text property of the label which is tapped on.

Marienthal

Answer 1

You can access the view of your item template via args.view. From that point, I assume that you will have different text in your list-items so it is important to create unique IDs for each Label via binding(using the Angular index). So you can do the following:

<ListView  [items]="myItems" (itemTap)="onItemTap($event)">
    <template let-item="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout [class.odd]="odd" [class.even]="even">
            <Label [id]="'lbl' + i" [text]='"Value is: " + i'></Label>
        </StackLayout>
    </template>
</ListView>

and then in your onItemTap

public onItemTap(args: ItemEventData) {
    console.log("Item Tapped at cell index: " + args.index);
    console.log(args.object); // prints something like ListView(137)
    console.log(args.view); // prints something like StackLayout(265)

    var lbl = <Label>args.view.getViewById("lbl" + args.index);

    console.log(lbl.text); // prints the actual text of the tapped label
}

Granivorous

I have a single label. I am getting the text value even if the id is not based on index. – Marienthal

Adding to this the id was based on angular binding ..but not index based. so i have [id]="'lbl'" in place of this ` [id]="'lbl' + i"` and it still works. Also this id="lbl" works as well – Marienthal

Well it would work as expected as long as your templates are using the same text... still, it is against all rules to have multiple items with the same id (which is what is going to happen if you are not creating unique IDs using the index). For example, if your list is using itemTemplates and has 10 items.. all of them will have the same id - how will you get the 3rd one? – Granivorous

yeah nice explanation..Thanks – Marienthal

@NickIliev But when I think about it , Label also inherits from view , so why won't it show Label in console.log(args.view); but StackLayout(265) ? – Nuncio

the args.view from itemTap will return the root view element from your template (thus in the case above the StackLayout). – Granivorous