Créer un pipe étatique avec Angular 2 : exemple d'un compteu

Créer des Filtres Personalisés avec Angular 2+

Les filtres de données sont un outil puissant pour personnaliser l’affichage de vos données dans votre application Angular. Dans ce tutoriel, nous allons vous montrer comment créer des filtres personnalisés à partir scratch et les utiliser dans votre code.

Introduction

Les filtres sont utilisés pour modifier la manière dont les données sont affichées dans votre application. Par exemple, vous pouvez créer un filtre qui convertit les dates en format jour/mois/année ou qui affiche les prix avec des décimales. Les filtres peuvent être divisés en deux catégories : les filtres d’état (stateful) et les filtres sans état (stateless).

Les filtres d’état sont utilisés pour stocker des données temporaires, ce qui peut être utile lorsque vous devez effectuer des calculs complexes. Cependant, ils peuvent également entraîner des performances plus basses si non gérés correctement. Les filtres sans état, quant à eux, ne conservent aucune donnée et sont généralement plus rapides.

Créer un Filtre d’État

Pour créer un filtre d’état, vous devez étendre la classe Pipe de Angular Core et implementer les interfaces PipeTransform et OnDestroy. Voici un exemple de code pour créer un filtre qui compte le temps restant avant une date donnée :

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

@Pipe({
  name: 'countdown',
  pure: false
})
export class CountdownPipe implements PipeTransform, OnDestroy {
  private interval: any;
  private remainingTime: number;

  transform(value: number, interval: number = 1000): number {
    if (!parseInt(value, 10)) {
      return null;
    }
    if (typeof this.remainingTime !== 'number') {
      this.remainingTime = parseInt(value, 10);
    }
    if (!this.interval) {
      this.interval = setInterval(() => {
        this.remainingTime--;
        if (this.remainingTime <= 0) {
          this.remainingTime = 0;
          clearInterval(this.interval);
          delete this.interval;
        }
      }, interval);
    }
    return this.remainingTime;
  }

  ngOnDestroy(): void {
    if (this.interval) {
      clearInterval(this.interval);
    }
  }
}

Vous pouvez utiliser ce filtre dans votre template comme suit :

{{ 1000 | countdown:50 }}
{{ 300 | countdown }}

Créer un Filtre Sans État

Pour créer un filtre sans état, vous devez étendre la classe Pipe de Angular Core et implementer l’interface PipeTransform. Voici un exemple de code pour créer un filtre qui vérifie si une valeur est vraie ou fausse :

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

@Pipe({
  name: 'truthy'
})
export class Truthy implements PipeTransform {
  transform(value: any, truthy: string, falsey: string): any {
    if (typeof value === 'boolean') {
      return value ? truthy : falsey;
    } else {
      return value;
    }
  }
}

Vous pouvez utiliser ce filtre dans votre template comme suit :

<p>{{value | truthy:'enabled':'disabled' }}</p>

Faire Partir un Filtre Globalement

Pour faire partir un filtre globalement, vous devez étendre la classe PLATFORM_PIPES de Angular Core. Voici un exemple de code pour faire partir le filtre personnalisé :

import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide, PLATFORM_PIPES } from '@angular/core';

bootstrap(AppComponent, [
  provide(PLATFORM_PIPES, {
    useValue: [
      MyPipe
    ],
    multi: true
  })
]);

Tester un Filtre

Pour tester un filtre, vous devez utiliser la bibliothèque de test d’Angular. Voici un exemple de code pour tester le filtre qui inverse une chaîne de caractères :

import { TestBed, inject } from '@angular/core/testing';
import { ReversePipe } from './reverse.pipe';

describe('ReversePipe', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ReversePipe]
    });
  });

  it('should be created', inject([ReversePipe], (reversePipe: ReversePipe) => {
    expect(reversePipe).toBeTruthy();
  }));

  it('should reverse a string', inject([ReversePipe], (reversePipe: ReversePipe) => {
    expect(reversePipe.transform('abc')).toEqual('cba');
  }));
});

Conclusion

Dans ce tutoriel, nous avons vu comment créer des filtres personnalisés à partir scratch et les utiliser dans votre code. Nous avons également vu comment faire partir un filtre globalement et comment tester un filtre. Les filtres sont un outil puissant pour personnaliser l’affichage de vos données dans votre application Angular.

Références

• Angular 2+ Notes for Professionals
• Créer une pipe personnalisée globalement disponible en Angular 2

Prochaines Étapes

• Explorez les différents types de filtres que vous pouvez créer.
• Apprenez à utiliser les filtres dans vos applications réelles.