List inside ListView



I’m facing a problem with nativescript angular : I can’t find how to create a list inside a ListView.
The straight out nested ListViews don’t work, and I’ve tried *ngFor inside GridLayout/StackLayout which leads me to a problem : only the first item is displayed correctly.
I can find information about those bugs but no success when trying to implement the proposed solutions.
Does that concept works for someone ?

Thank you for considering my topic :slight_smile:


hey @pacome2017 What is the need of nested listview means listview inside the llistview?

Can you share your code here, So that anyone of the community members can help you!


Hey @kumaran,

the need for a list nested inside a listview is that I want to display multiple long lists of items inside the same view. A Listview can be scrolled and its items clicked, but


doesn’t work.
What i’ve tried is a ng-template ngFor inside a Layout, so :

<StackLayout *ngFor="let item of items"><label [text]=""></label></StackLayout>
/* some code */

I’ve also tried to add a GridLayout with specified height and couple other things and it doesn’t render correctly or only for the first item.


Currently Nativescript not support Nested Listview…
You can check it here…


From a design point of view, nested lists is not good intuitive UI, you should reconsider your interface design. e.g. when click on an item on the first list view, it should show the next list view in a modal. this way you keep the UI clean and the user focused. However, If you still looking for nested list maybe try on of the following ways:

  • in the list item template use a repeater to imitate a nested list view behaviour.
  • or consider using Accordion plugin


Hello @ganas,

I’ve tried to use a ng-template ngFor for that and I can’t find the right syntax


Can you share a rough design of what you are trying to accomplish?

Nested lists are a big no-no. The performance hit alone on that should make you steer clear from that. Also using a repeater (*ngFor) inside a ListView template is going to be a bad practice, but may not be avoidable for your design.

If you can share that, I’m sure we can find a solution that satisfies your requirements.


Also the syntax for using ngFor on a ng-template is as follows:

<ng-template ngFor let-item [ngForOf]="items$ | async" let-i="index"></ng-template>


Roughly what I have is the following :


/*some working element*/

/* Here I want to add a list*/
<StackLayout with ngFor template>
<label with text></label>


The problem in this example is that only the first label of the array will be displayed correctly, the other will be stack on the same position, unreadable.


See here an example of nested list views


Haha I meant an image of the desired UI. That way I can visualize what is needed to be accomplished.


@ganas , thank you I will try with RadListView.

@sean-perkins , the desired UI is a basic list with labels and maybe an image.


@ganas I’m trying to reproduce the example you’ve linked. It seems I have an error concerning the imports :
“No provider for ListViewComponent” before each


I wish I could help you bud, but I only use Nativescript with awesome plane javascript, not an angular guy, but sure others can help you here.
But I tested the app on my phone through play ground and its working fine


@pacome2017 could you make a pictorial rough sketch of what you are trying to accomplish?



I could yes. It is a simple concept I’m trying to implement though : A list which contains multiple lists of items (say text for example).
The pictorial rough sketch here is a nested Listview for me … with margins so it can be scrolled dependently for the mother list and each children lists.


Would have loved to see a drawing tho. But could a ListView with sectioned headers bear any resemblance to what you are trying to achieve?
Or you wish for the ListViews to have a specific height so they can be scrolled within a viewport while still being able to scroll the various parents when each ListView gets to the end?


i used repeater inside listview.

	loaded="pageLoaded"	>
	<Page.actionBar class="actionBarPeraturan">
		<ActionBar title="{{ judullaman }}"  icon="" id="searchbarParent">
			<ActionItem icon="res://search" position="actionBar" tap="onTapSearch" />
			<SearchBar id="pencarian" hint="{{ hintCari }}" submit="cariPeraturan" textFieldHintColor="white" text="{{ kataKunci}} " visibility="{{ tampilSearchBar ? 'visible' : 'collapsed' }} " />
			<ActionItem tap="onHome" text="Home" android.position="popup" />
			<ActionItem tap="onUnduhan" text="Unduhan" android.position="popup" />
			<ActionItem tap="onTips" text="Tips Pencarian" android.position="popup"/>
			<ActionItem tap="onKeluar" text="Keluar" android.position="popup" />
	<FlexboxLayout flexDirection="column" justifyContent = "space-between">
		<FlexboxLayout flexWrap="wrap"  alignContent="flex-start" >
		<PullRefresh:PullToRefresh refresh="refreshList">
		<ListView dock="top" id="hasitampil" items="{{ hasilPeraturan }}" class="listViewer" itemTap="judulDetail"  loadMoreItems="loadMoreItems" >
			<ListView.itemTemplate >
				<StackLayout  orientation="vertical" class="stackLayoutList"  >
					<Label text="{{ judullaman }}" visibility="{{ judullaman ? 'visible' : 'collapsed' }}" class="labelJudulJenisPeraturan" textWrap="true" />
					<Label text="{{ judul }}" visibility="{{ judul ? 'visible' : 'collapsed' }}" class="labelJudulPeraturan" textWrap="true" />
					<Label text="{{ tentang }}" visibility="{{ tentang ? 'visible' : 'collapsed' }}" class="labelTentangPeraturan" textWrap="true" />
					<Label text="{{ detailtentang }}" visibility="{{ detailtentang ? 'visible' : 'collapsed' }}" class="labelDetailTentangPeraturan" textWrap="true" />
					<Label text="{{ tanggal }}" visibility="{{ tanggal ? 'visible' : 'collapsed' }}" class="labelKetPeraturan" textWrap="true" />
					<Label text="{{ ln }}" visibility="{{ ln ? 'visible' : 'collapsed' }}" class="labelKetPeraturan" textWrap="true" />
					<Label text="{{ tln }}" visibility="{{ tln ? 'visible' : 'collapsed' }}" class="labelKetPeraturan" textWrap="true" />
					<Label text="{{ pdfviewer }}" class="labelKetPeraturan" textWrap="true" />
						<Repeater items="{{ pdfviewer }}" visibility="{{ pdfviewer ? 'visible' : 'collapsed' }}"  >
								<WrapLayout />
								<StackLayout orientation="horizontal">
									<Label text="{{ $value.label }}" tap="urlPdf" class="labelDownloadPdf" textWrap="true" />
					<Label text="{{ urutdata }}" class="labelJudulJenisPeraturan" textWrap="true" />	
		<FlexboxLayout height="{{ tinggiflex }}" flexDirection="column"  class="flexketerangan" >
			<Slider value="{{ lastValueSlider }}" maxValue="{{ jumHalaman }}" minValue="1"  id="yourSlider" visibility="{{ tampilSlider }}" />
			<GridLayout columns="*,150" rows="*" >
				<Label  text="{{ tahunView }}"  tap="onTapTahun" row="0" col="0"  style="vertical-align:center; padding: 5 5 5 5; font-weight : bold;" textWrap="true"   /> 
				<Label  text="{{ ketDataView }}"  row="0" col="1" tap="onTapHalaman"  style="vertical-align: center;horizontal-align:right; padding: 5 5 5 5;font-weight : bold; " textWrap="true"  /> 
<!-- 60 kalau slider collapsed 120 kalau muncul -->

if you want to see the apps you can download on google play store for keywords “Kumpulan Peraturan” after you choose list in homepage


@jogboms sketch
first frame is the screen, the second the mother listView and the two nested frames are the lists I’m trying to implement. The lines on the right mean the lists can be scrolled and I have of course more than 2 nested boxes.


@shafrudin thanks for the example, I’m using nativescript with angular, It seems repeaters are not working in that case.


Correction : I don’t want the nested boxes to be scrollable (It would be nice though) … I can just set the height depending on how many items I have.
What is important is that the mother list is scrollable (a listView) and the nested lists are observable arrays of text (I’ve tried label inside stacklayout with *ngFor which is not working).