How to group by in ion list?

Issue

How to display group by data in ion list?

<ion-list *ngFor="let obj of data; let i=index">
  <ion-item-sliding>
      <ion-item>
        <div>UT_TXN_CODE: {{obj.UT_TXN_CODE}}</div>
        <br>Date {{obj.UT_LOG_DATE}}
        <br>Subject : {{obj.UT_SUBJECT}}
        <br>UT_LINK: {{obj.UT_LINK}}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="secondary">
          <ion-icon name="checkmark"></ion-icon>
          Approve
        </button>
        <button ion-button color="blue">
          <ion-icon name="checkmark"></ion-icon>
          Send For<br> Approval
        </button>
      </ion-item-options>
  </ion-item-sliding>
</ion-list>

I want to group by this UT_TXN_CODE. It must disply UT_TXN_CODE as a group head.

Solution

Try This Code

<ion-list *ngFor="let obj of data; let i=index">
    <ion-list-header>
     {{obj.UT_TXN_CODE}}
    </ion-list-header>
    <ion-item-sliding>
      <ion-item>
            <div>UT_TXN_CODE: {{obj.UT_TXN_CODE}}</div>
            <br>Date {{obj.UT_LOG_DATE}}
            <br>Subject : {{obj.UT_SUBJECT}}
            <br>UT_LINK: {{obj.UT_LINK}}
      </ion-item>
      <ion-item-options side="right">
            <button ion-button color="secondary">
              <ion-icon name="checkmark"></ion-icon>
              Approve
            </button>
            <button ion-button color="blue">
              <ion-icon name="checkmark"></ion-icon>
              Send For<br> Approval
            </button>
      </ion-item-options>
   </ion-item-sliding>
</ion-list>

Answered By – Bhautik Dobariya

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.