Listview multiple "widgets"


#1

Hi, I have little difficult problem for me with ListView.

  1. I have this graphics https://ibb.co/j6wdk7
  2. I have done it but with *ngFor’s https://pastebin.com/zcV5YWZs
  3. This is how I want it. (uses *ngFor) https://www.youtube.com/watch?v=z5CY_R6OAmI&feature=youtu.be
  4. Performance is very bad on android and app is crashing (iOS is great as usual)
  5. I need everything transform to ListView
  6. I really don’t know how. I read doc, google for done examples and I can’t find solution which would solve my problem.
  7. I made simple template in playground https://play.nativescript.org/?template=play-ng&id=Rhw4HJ&v=2
  8. Is possible to give me some advice or edit playground example to show how to do it?

Could someone help me find solution? I will really appreciate it. :frowning:
Thank you so much


#2

There you go: https://github.com/hettiger/ns3test/tree/flexible-list

You might also have a look at the master-detail templates.


#3

Thanks for your help. But it isn’t solution for my problem. I don’t have only one kind of items. I have more items. Maybe I need to use multiple listviews one for games and one for articles. But then I will not be able to scroll like in video.

Games is different object and articles are different object.


#4

@b4rtt I have implemented multiple different item templates in the repo. Please have a closer look.


#5

Yeah, sorry. Now I see it. But I am still furstrated :confused: Why doesn’t exists some better (nice) way how to do it. ngFor is working better :confused:


#6

I think the documentation covers it better, you just got to take a closer look.

https://docs.nativescript.org/cookbook/ui/list-view#define-multiple-item-templates-and-an-item-template-selector-in-xml


#7

@manojdcoder He said that he has read the docs but you’re absolutely correct. Docs would cover this perfectly fine.

@b4rtt Take a look at the native implementation of these components and you will realize why it is not that simple and how awesome NativeScript actually is. Anyways you’re right: There’s always room for improvements. Go ahead draft a PR. :wink:


#8

Guys thank you so much for your help. Example in docs that @manojdcoder posted is for Javascript. Could you help me why it’s not working in angular?


#9

Looks like it is working perfectly fine
Link: https://play.nativescript.org/?template=play-ng&id=cOGW6I&v=6

I just followed this part of the docs
https://docs.nativescript.org/ui/list-view#using-multiple-item-templates

You had missed creating an itemTemplateSelector [itemTemplateSelector]="templateSelector"

and then you use nsTemplateKey instead of just key in Angular.

Your sample is now working. :slight_smile:

Cheers!