CODEWITHSUNDEEP
htmlangularionic-framework
Kalybor
Kalybor

Reputation: 51

Sublist display in ionic, angular and html

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.

Upvotes: 1

Views: 207

Answers (1)

uKioops
uKioops

Reputation: 354

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.

Upvotes: 1

Related Questions