Sublist display in ionic, angular and 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.

Did you try with a second "ngFor"?

nicolascolman
– nicolascolman

2021-06-21 13:04:52 +00:00
Commented Jun 21, 2021 at 13:04 — nicolascolman
– nicolascolman, Commented Jun 21, 2021 at 13:04
im not sure i understand your suggestion @nicolascolman

Kalybor
– Kalybor

2021-06-21 13:09:57 +00:00
Commented Jun 21, 2021 at 13:09 — Kalybor
– Kalybor, Commented Jun 21, 2021 at 13:09

uKioops · Accepted Answer · 2021-06-21 13:23:23Z

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.

edited Jun 21, 2021 at 13:23

answered Jun 21, 2021 at 13:18

uKioops

3543 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kalybor Over a year ago

The display with ion-item works, thank you.

Collectives™ on Stack Overflow

Sublist display in ionic, angular and html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related