Ionic - 8.11 Éléments de liste glissables pour éditer une offre

Sur la page des offres, chaque élément peut déjà être touché pour ouvrir une offre. Cette leçon ajoute un geste de glissement de droite à gauche, pour afficher des options comme Éditer. Le composant utilisé est ion-item-sliding, qui se combine avec ion-item.

Créer un élément glissable

La documentation Ionic regroupe les composants de la catégorie Item. Les composants sliding, dont ion-item-sliding, donnent accès à des options supplémentaires. Les séparateurs et les groupes servent à diviser une liste, ce qui n'est pas traité ici.

On encadre le ion-item existant avec un ion-item-sliding, puis on ajoute un ion-item-options qui contient les actions. Une référence de template, comme slidingItem, permet ensuite de désigner cet élément dans la méthode.

La vidéo corrige aussi la boucle Angular : elle doit entourer chaque élément glissable, sinon un seul élément apparaît.

<ion-item-sliding #slidingItem>
  <ion-item>
    <!-- Contenu de l'offre -->
  </ion-item>
  <ion-item-options>
    <ion-item-option color="secondary" (click)="onEdit(offer.id, slidingItem)">
      Éditer
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

Ajouter l'action Éditer

Lors d'un clic sur Éditer, la méthode onEdit reçoit l'identifiant de l'offre et l'élément glissant. Dans le fichier TypeScript, elle referme l'élément avec close, puis redirige vers la page d'édition.

Le chemin d'édition suit la structure du routage : places, tabs, offers, puis edit, suivi de l'identifiant du lieu. La vidéo n'utilise pas routerLink ici, car il ne fonctionne pas correctement avec ces éléments.

onEdit(offerId: string, slidingItem: IonItemSliding) {
  slidingItem.close();
  this.router.navigate(['/places/tabs/offers/edit', offerId]);
}

Pourquoi fermer l'élément

La méthode close referme l'option glissée après le clic. Sans elle, l'élément resterait ouvert au retour sur la page. La vidéo vérifie ensuite que la mise en page reste correcte et que la redirection vers l'édition fonctionne.

En résumé

ion-item-sliding rend un élément glissable, et ion-item-options regroupe les actions. Un clic sur Éditer ferme l'élément, puis redirige vers la page d'édition avec l'identifiant. La documentation officielle détaille les autres réglages, comme le sens du glissement.

Points clés

• ion-item-sliding rend un élément glissable.
• ion-item-options regroupe les actions proposées au glissement.
• Un clic sur Éditer appelle une méthode avec l'identifiant de l'offre.
• close referme l'élément après le clic.
• La redirection vers l'édition se fait avec le routeur Angular.

Questions fréquentes

Pourquoi ne pas utiliser routerLink sur l'option ?

La vidéo indique que routerLink ne fonctionne pas correctement avec les éléments glissants. La méthode du routeur contourne ce problème.

À quoi sert la référence #slidingItem ?

Elle désigne l'élément glissant dans le template, afin de le passer à la méthode et de le fermer après le clic.

Où trouver les autres options du glissement ?

Dans la documentation officielle d'Ionic, dans la catégorie Item, avec les composants sliding.