Son astuce pour mieux se former

Plonge dans une interview inspirante et condensée de Gérôme Grignon, développeur frontend passionné et figure incontournable de la communauté Angular francophone.

Dans cet échange, Gérôme partage son parcours, ses conseils d'apprentissage, sa vision d'Angular et sa réflexion sur l'usage de l'IA dans le développement web.

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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',
  standalone: true
})
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',
  template: `
    <h1>{{ 'John Doe' | author }}</h1>
  `,
  imports: [AuthorPipe],
  standalone: true
})
export class MyComponent {}