Les filtres (pipes)

Les filtres (également appelés pipes, qui signifie en anglais tuyaux) permettent de modifier un élément avant son affichage dans un template. Les filtres sont beaucoup utilisés lorsqu’il s’agit d’afficher une date ou un prix et sa devise.

1. Utiliser les filtres

Pour utiliser les filtres, il est nécessaire d’injecter une donnée à afficher dans le composant. Pour les exemples concernant les filtres, il est possible d’utiliser le composant suivant :


interface ArticleInterface { 
  nom: string; 
  depart: Date; 
} 
 
@IonicPage() 
@Component({ 
  selector: 'page-accueil', 
  templateUrl: 'accueil.html', 
}) 
export class AccueilPage { 
  article: ArticleInterface; 
 
  constructor() { 
    this.article = { 
      nom: "Voyage Fuerteventura 7j", 
      depart: new Date(2018, 7, 27), 
    }; 
  } 
}
 

Pour afficher le nom du voyage dans un template, il faut utiliser la ligne suivante :


<ion-item>{{ article.nom }}</ion-item>
 

Cette ligne affiche la valeur contenue dans article.nom sans aucune modification. Il est possible d’imaginer que dans l’agence de voyage, l’ERP de l’entreprise ne fonctionne qu’en majuscules et qu’il soit plus simple de rechercher un voyage en copiant/collant le nom du voyage en majuscules. Pour afficher...

Pour consulter la suite, découvrez le livre suivant :
couv_EPMETION.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Événements et formulaires
Suivant
Proposer des actions à l'utilisateur