how can l get event that item component tap ?

[Scleo]

I am in the list view is very convenient, but I don't know how to pour the items，Did anyone give me a method？

my ex: item had three component ,one label & two button ,i want get the button event

[Scleo]

follow my html code 

<GridLayout dock="right">
    <RadListView [items]="detailList" (itemSelected)="onItemSelected($event)" exampleTitle toggleNavButton>
        <template tkListItemTemplate class="list-detail" let-item="item">
            <GridLayout columns=" *,*,*" rows="auto,auto,auto">
                <TextField colSpan="3" row='0' *ngIf="option==='modify' &&hasChild&& item.list" [(ngModel)]="currentItem.name"></TextField>
                <Button *ngIf="option==='modify' &&hasChild&& item.list" col='1' row='1' text="save" (tap)="modifyItem(currentItem)"></Button>
                <Button *ngIf="option==='modify' &&hasChild&& item.list" col='2' row='1' text="cancel" (tap)="modifyQuit(item)"></Button>
            </GridLayout>
        </template>
    </RadListView>
</GridLayout>

 

thanks a lot ~

[Nick Iliev]

Hello Scleo Lei,

I am not quite sure what are you trying to achieve when you say "how to pour the items".
Are you trying to load your items in your list-view!? If so, you can do it by providing your data-items in your component  constructor or ngOnInit method (if you have implemented OnInit)
Example for the basic pouring of items into list-view can be found here (with vanilla list-view but the principle is the same for RadListView) or  these examples here (for RadListView).

As for the second question (how to get the button event) you can also do it via your code behind in the component. For example take a look at the button in this sample.

<Button row="2" text="Change Color" (tap)="changeColor(hexField.text)"></Button>

On tap, it will trigger the method changeColor which takes an argument (in this specific case the argument is the text passed from TextField). Of course, the argument is not mandatory - it depends on your logic.
Now let's take a look at the method itself.
 

public changeColor(value: string) {
    if (value[0] !== '#') {
        value = "#" + value;
    }
    var isValidHexColor = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);

    if (isValidHexColor) {
        var rgbColors = this.convertHex(value);
        this.redValue = rgbColors[0];
        this.greenValue = rgbColors[1];
        this.blueValue = rgbColors[2];
    } else {
        console.log("Invalid hex value entered");
    }
}

The method is declared inside your AppComponent class and when triggered with taking the passed value and execute the logic that depends on it. The whole example can be found here. In the same application, you can find a lot more examples written in NativeScript + Angular 2.

I hope that information will answer your questions - please let us know if you need further assistance.

Regards,

Author nickname

Telerik by Progress

[Scleo]

Hi Nikolay,
     the item is show correct, but use button the tap event didn't work (ios platform,I guess may be the button with the listview an event conflict ) ,so i changed  button to use label ,then the tap event be ok.
and thank your sample，studied。

[Nick Iliev]

Hi  Lei,

Indeed, the button component is a special case which has its own tap handler and event (which may cause this event conflict).
So your workaround with using a Label is a very good solution (you can also use any other layout element to trigger the tap e.g. Grid). Thank you for reporting back!

Regards,
Nikolay Iliev
Telerik by Progress