Listview multiple “widgets” - nativescript

Question

I have little difficult problem for me with ListView.
1) I have this graphics https://ibb.co/j6wdk71
2) I have done it but with *ngFor’s
<ActionBarLogo (myEvent)="onDrawerButtonTap($event)"></ActionBarLogo>
<RadSideDrawer #drawer showOverNavigation="false" gesturesEnabled="{{android}}" [drawerTransition]="sideDrawerTransition">
<StackLayout tkDrawerContent class="drawer">
<MyDrawer [selectedPage]="'Home'"></MyDrawer>
</StackLayout>
<GridLayout rows="*, auto" class="page page-content" tkMainContent>
<StackLayout class="fade-in" row="0" orientation="vertical" *ngIf="loading==false && network_error==false">
<StackLayout>
<PullToRefresh (refresh)="refreshList($event)">
<ScrollView orientation="vertical">
<StackLayout>
<StackLayout>
<ScrollView orientation="horizontal" scrollBarIndicatorVisible="false">
<StackLayout orientation="horizontal" class="games">
<StackLayout class="game" width="{{screen_width}}" *ngFor="let game of games">
<StackLayout class="game-inner">
<StackLayout class="game-date">
<Label text="{{game.league}}, {{game.round}}. kolo" class="game-round"></Label>
<Label text="{{ game.date | format_date }}" class="game-date-text"></Label>
</StackLayout>
<StackLayout class="game-data">
<FlexboxLayout flexDirection="row">
<StackLayout flexGrow="1" class="game-team">
<WebImage src="{{game.team_home.logo}}" height="40" class="game-team-logo"></WebImage>
<Label text="{{game.team_home.name}}" textWrap="true" class="game-team-name"></Label>
</StackLayout>
<StackLayout flexGrow="1" class="game-score">
<Label class="game-score-inner" text="-:-" textWrap="true" *ngIf="game.score==null"></Label>
<Label class="game-score-inner" text="{{game.score}}" textWrap="true" *ngIf="game.score!=null"></Label>
</StackLayout>
<StackLayout flexGrow="1" class="game-team">
<WebImage src="{{game.team_away.logo}}" height="40" class="game-team-logo"></WebImage>
<Label text="{{game.team_away.name}}" textWrap="true" class="game-team-name"></Label>
</StackLayout>
</FlexboxLayout>
</StackLayout>
<StackLayout class="game-button" orientation="horizontal" horizontalAlignment="center" [nsRouterLink]="['/game', game.id]"
pageTransition="flip">
<WebImage src="~/assets/menu_icons/matches.png" width="15"></WebImage>
<Label text="informácie o zápase" class="game-button-btn"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout>
<StackLayout class="hp-partners">
<StackLayout class="hp-partners-heading">
<Label text="Partneri klubu"></Label>
</StackLayout>
<FlexboxLayout flexDirection="row">
<StackLayout class="partner" *ngFor="let partner of partners">
<WebImage src="{{partner.img_url}}" stretch="aspectFit" width="100%" class="partner-image" (tap)="open_url(partner.url)"></WebImage>
</StackLayout>
</FlexboxLayout>
</StackLayout>
<StackLayout class="articles-list">
<StackLayout class="article" [nsRouterLink]="['/article', article.id]" pageTransition="slideLeft" *ngFor="let article of articles, let i=index">
<StackLayout class="article-photo">
<WebImage src="{{article.photo}}" stretch="aspectFill" placeholder="~/assets/placeholder.png" class="article-photo-image"></WebImage>
</StackLayout>
<StackLayout class="article-body">
<StackLayout class="article-data">
<FlexboxLayout flexDirection="row">
<StackLayout class="article-date" orientation="horizontal">
<WebImage src="~/assets/menu_icons/date.png" class="article-date-ico"></WebImage>
<Label text="{{ article.date | format_date }}" class="article-date-text"></Label>
</StackLayout>
<StackLayout class="article-sticker" orientation="horizontal">
<WebImage src="~/assets/menu_icons/tag.png" class="article-sticker-ico"></WebImage>
<Label text="{{article.category}}" class="article-sticker-text"></Label>
</StackLayout>
<StackLayout class="article-stickers" flexGrow="1" orientation="horizontal">
<WebImage src="~/assets/article_stickers/text.png" class="article-stickers-image" *ngIf="article.sticker_text==true"></WebImage>
<WebImage src="~/assets/article_stickers/video.png" class="article-stickers-image" *ngIf="article.sticker_video==true"></WebImage>
<WebImage src="~/assets/article_stickers/photo.png" class="article-stickers-image" *ngIf="article.sticker_photogallery==true"></WebImage>
</StackLayout>
</FlexboxLayout>
</StackLayout>
<StackLayout class="article-heading">
<Label text="{{article.heading}}" class="article-heading-text" textWrap="true"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="i==330">
<StackLayout class="banner" *ngFor="let banner of banners">
<WebImage src="{{banner.image}}" stretch="aspectFit" width="100%" class="banner-image" (tap)="open_url(banner.url)"></WebImage>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
<StackLayout class="load-more-button">
<Button class="btn btn-primary" text="Načítať ďalšie" (tap)="load_more_articles()" *ngIf="loading_more_articles==false"></Button>
<LoadingSmall *ngIf="loading_more_articles==true"></LoadingSmall>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</PullToRefresh>
</StackLayout>
</StackLayout>
<Loading *ngIf="loading==true && network_error==false"></Loading>
<StackLayout height="100%" (tap)="check_connection()" *ngIf="network_error==true">
<NetworkError></NetworkError>
</StackLayout>
<Tabs></Tabs>
</GridLayout>
</RadSideDrawer>
3) This is how I want it. (uses *ngFor) https://www.youtube.com/watch?v=z5CY_R6OAmI&feature=youtu.be1
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=21
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