How can I pass props from ListView item to two different templates


#1

Hey guys, how can I see details from a ListView item in two or more different templates?
I mean, I have a listview to the left and a item description to the right.

So I click to see more details and based on status flag I show a form or a details template, it means it’s a dynamic load data/template right?

<ListView [items]="myItems" [itemTemplateSelector]="templateSelector">
    <ng-template nsTemplateKey="header" let-item="item">
        <ListView ....></ListView>
    </ng-template>
</ListView>

In the same html file, I have more templates and I’d like to receive data from ListView item data.

 <ng-template nsTemplateKey="item" let-item="item">
  <StackLayout *ngIf="item.status === 1">
    <Label text="Show form here"></Label>
  </StackLayout>

  <StackLayout *ngIf="item.status === 2">
    <Label text="Show description here"></Label>
  </StackLayout>
</ng-template>

References

https://docs.nativescript.org/angular/ui/list-view


#2

Hi @francisrod01, If I understand correctly you want to know the selected item and pass the props so may be you can use itemselcted event e.g. (itemSelected)=“onItemSelected($event)”
&
import { ListViewEventData, RadListView } from ‘nativescript-ui-listview’;
In onItemSelected(args: ListViewEventData){} you can use arg.index to get the selectedtem index and show the description accordingly.


#3

@nmongiya Thank you for your answer. :slight_smile:

It really necessary use another ListView component?
I don’t understand why the default ListView is not useful to do that.

Edit

I updated the post description.