Sublist display in ionic, angular and html - html

Question

The following code displays data in this way current display
<div id="scrollDiv">
<ion-content style="height: 280px" [scrollEvents]="true">
<ion-grid>
<ion-row *ngFor="let item of zdruzenData; let i = index" >
<ion-col size="auto" class="cell-class" (click)="prikaziEvente(i+1)">{{item}}</ion-col>
<div *ngIf="izbranDanInt == i+1">
<ion-row *ngFor="let item of izbranDatumEventi">
<ion-col size="auto" class="cell-class" >{{item}}</ion-col>
</ion-row>
</div>
</ion-row>
</ion-grid>
</ion-content>
But i want it to be like this(edited with paint) wanted display.
As if the chosen day has this sublist display of timestamps(it gets displayed onclick, the logic for this is written and working). Sort of like comments on forums like reddit when you comment on the comment and it gets indented right.
So my question here comes from my lack of html, angular and ionic frontend knowledge and there is no need to stick to the ionic components like ion grid, as long as it gets display in a list-sublist way dynamically.

Answer 1

Your problem comes from the use of row and col inside row and col.
If you put two col in a row, on large screen it will take half the space (6 blocks each). Or you need to use
<ion-col size="12"></ion-col>
You could also use item or card to display your data.
https://stackblitz.com/edit/ionic-marezw?file=pages/home/home.html
<ion-grid>
<ion-row *ngFor="let list of dataList">
<ion-col>
<ion-item (click)="onClick()">
{{list}} (click me)
</ion-item>
<ion-item *ngIf="clicked === true">
<ion-item *ngFor="let sublist of dataSublist">{{sublist}}</ion-item>
</ion-item>
</ion-col>
</ion-row>
I don't know if you want everything to open on click, or just data under the one that is clicked.
It'll help if you show us izbranDatumEventi and zdruzenData. Or at least an equivalent construction of your code.