📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Créer un pipe personnalisé

Pour créer un pipe "author" personnalisé dans Angular, vous devez d'abord créer un nouveau pipe en utilisant la commande Angular CLI suivante :

sh
ng generate pipe author

Cela créera un nouveau fichier appelé "author.pipe.ts" dans votre projet, contenant le squelette d'un pipe Angular. Vous pouvez ensuite ajouter votre logique personnalisée dans la méthode transform du pipe, comme ceci :

ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'author'
})
export class AuthorPipe implements PipeTransform {
  transform(value: string): string {
    // Ajouter votre logique personnalisée ici
    return 'Auteur : ' + value;
  }
}

Dans cet exemple, la méthode transform ajoute simplement le préfixe "Auteur :" à la valeur fournie en entrée. Vous pouvez remplacer cette logique par toute autre logique que vous souhaitez utiliser pour formater les noms d'auteur.

Une fois que vous avez terminé de définir votre pipe "author" personnalisé, vous devez l'inclure dans votre modèle en ajoutant l'annotation "Pipe" et en spécifiant le nom du pipe ("author") comme suit :

ts
import { Component } from '@angular/core';
import { AuthorPipe } from './author.pipe';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  pipes: [AuthorPipe]
})

Une fois que vous avez fait cela, vous pouvez utiliser le pipe "author" dans votre vue (template) en l'appliquant à une chaîne de caractères contenant le nom d'un auteur en utilisant la syntaxe suivante :

sh
{{ myAuthorName | author }}

Cela affichera le nom de l'auteur en ajoutant le préfixe "Auteur :" défini dans la méthode transform du pipe.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !