Listview multiple "widgets"


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

  1. I have this graphics
  2. I have done it but with *ngFor’s
  3. This is how I want it. (uses *ngFor)
  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
  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


There you go:

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


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.


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


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:


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


@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:


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?


Looks like it is working perfectly fine

I just followed this part of the docs

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: