📢 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

Ecouter les changements sur FromControl à l'aide d'un Observable

Voici un exemple d'utilisation d'un observable sur un FormControl avec les opérateurs debounceTime et distinctUntilChanged dans Angular :

ts
import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs';

@Component({
  selector: 'app-my-component',
  imports: [ReactiveFormsModule],
  template: `
    <input type="text" [formControl]="searchField">
  `
})
export class MyComponentComponent implements OnInit {
  searchField = new FormControl()

  ngOnInit() {
    this.searchField.valueChanges
      .pipe(
          debounceTime(400), 
          distinctUntilChanged()
      )
      .subscribe(term => this.search(term));
  }

  search(term: string) {
    console.log(`Searching for ${term}...`);
  }
}

Dans ce code, nous avons un composant qui possède un champ de recherche sous la forme d'un FormControl. Nous avons également un observable qui écoute les changements de valeur du FormControl. Lorsqu'un changement de valeur est détecté, l'observable attend 400 millisecondes avant de continuer afin d'éviter les appels de fonction trop fréquents. L'opérateur distinctUntilChanged permet de n'émettre la valeur que si elle a effectivement changé par rapport à la précédente. Ainsi, lorsque l'utilisateur a terminé de taper dans le champ de recherche, l'observable émet la valeur finale et appelle la fonction de recherche avec cette valeur en tant qu'argument.

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