Nativescript label inside gridlayout not getting ripple effect

Question

I am using nativescript version 2.4.2. Labels in android are getting the ripple effect but when I have the labels under a click-able gridlayout the ripple does not happen.

Consider the following code

<StackLayout text="fill">
      <ListView [items]="groceryList | async | searchFilter:sb.text" class="listview">

    <template let-item="item" col="0">
      <GridLayout columns="auto,auto,*" rows="*,*" class="fa" (tap)="goToList(item)">
        <Label horizontalAlignment="left" verticalAlignment="center" [text]="item.iconFont | fonticon" class="h2 icon-thumbnail"></Label>
        <Label col="1" horizontalAlignment="center" [text]="item.name" class="listview item "></Label>
        <Label col="2" horizontalAlignment="right" text="&#xf105;" class="listview item" class="h2 arrow-icon "></Label>

      </GridLayout>
    </template>

  </ListView>
 </StackLayout>

Note that I have (tap)="goToList(item)" on the gridview. Removing the tap event binding makes it work.

Answer 1

As your GridLasyout is basically the container for your item template why not use the built-in itemTap for the list-view items instead of creating your own tap for the inner container.

  <ListView col="0" [items]="groceryList" (itemTap)="goToList($event)">
    <template let-item="item">
      <GridLayout columns="auto,auto,*" rows="*,*" class="fa">
        <Label col="2" horizontalAlignment="right" text="&#xf105;"></Label>
      </GridLayout>
    </template>

And from here you can use the arguments that are coming with $event e.g.

public goToList(args) {
    console.log("Item Tapped at cell index: " + args.index);
    // use the index to navigate to this item
}

Full example here