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.

Nick Iliev · Accepted Answer · 2017-01-25 15:55:54Z

3

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
}

answered Jan 25, 2017 at 15:55

Nick Iliev

9,6703 gold badges38 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

krv Over a year ago

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

krv Over a year ago

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

Nick Iliev Over a year ago

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?

krv Over a year ago

yeah nice explanation..Thanks

Royi Namir Over a year ago

@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) ?

|

Collectives™ on Stack Overflow

In NativeScript with Angular2 get element value

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related