Configuration

Introduction

This article shows you how to use the list on the page, then demo the contact list that the app is using.

Usage

There are examples of the list, you can use them by coping, then put them into your HTML file:

• List of text items

  <ion-list>
      <ion-item>
          <ion-label>Pokémon Yellow</ion-label>
      </ion-item>
      <ion-item>
          <ion-label>Mega Man X</ion-label>
      </ion-item>
      <ion-item>
          <ion-label>The Legend of Zelda</ion-label>
      </ion-item>
  </ion-list>
  

• List of sliding items

  <ion-list>
      <ion-item-sliding>
          <ion-item>
              <ion-label>Item 1</ion-label>
          </ion-item>
          <ion-item-options side="end">
              <ion-item-option (click)="unread(item)">Unread</ion-item-option>
          </ion-item-options>
      </ion-item-sliding>
  
      <ion-item-sliding>
          <ion-item>
              <ion-label>Item 2</ion-label>
          </ion-item>
          <ion-item-options side="end">
              <ion-item-option (click)="unread(item)">Unread</ion-item-option>
          </ion-item-options>
      </ion-item-sliding>
  </ion-list>
  

  Let's dive into the detail:

  • There are two sliding items defined by <ion-item-sliding> tag.
  • <ion-item> tag contains the UI of the item.
  • <ion-item-options> contains the list of <ion-item-option>, show them by swiping the item from the left-to-right or vice versa.

You can click here for more detail.

Demo

The contact feature is now using the sliding list type. It supports swiping actions that you can use for revealing options.

See the lines of code below, you can easily find It in the contact-list.page.html file, in src/app/pages/contact/contact-list folder.

<ion-list>
	<ion-item-sliding *ngFor="let contact of contacts">
		<ion-item>
			<ion-avatar slot="start">
				<img [src]="contact.avatar" />
			</ion-avatar>
			<ion-label>
				<h2>{{contact.name}}</h2>
				<h3>{{contact.type}}</h3>
				<p>{{contact.address}}</p>
			</ion-label>
		</ion-item>
		<ion-item-options side="end" (ionSwipe)="deleteContact(contact.id)">
        	<ion-item-option [routerLink]="['/contacts', contact.id]">
            	<ion-icon name="create-outline" slot="icon-only"></ion-icon>
            </ion-item-option>
			<ion-item-option color="danger" expandable (click)="deleteContact(contact.id)">
            	<ion-icon name="trash" slot="icon-only"></ion-icon>
        	</ion-item-option>
		</ion-item-options>
    </ion-item-sliding>
</ion-list>

We also have the appropriate actions in the contact-list.page.ts.

...
export class ContactListPage implements OnInit {
	contacts = [];
	...

	deleteContact = async (id: string) => {
		...
	}
}

References

• ion-item-options

• ion-item-sliding