Observables dans Angular

Angular utilise les observables comme interface pour gérer diverses opérations asynchrones courantes, comme :

• La classe EventEmitter s'étend Observable.
• Le module HTTP utilise des observables pour gérer les requêtes et les réponses AJAX.
• Les modules Router et Forms utilisent des observables pour écouter et répondre aux événements entrés par l'utilisateur.

Émetteur de l'événement

Angular fournit une classe EventEmitter utilisée lors de la publication des valeurs d'un composant via le décorateur @Output(). EventEmitter ajoutant à l'observable une méthode emit() afin qu'il puisse envoyer des valeurs arbitraires. Lorsque vous appelez emit(), la valeur émise est transmise à la méthode next() de tout observateur abonné.

Vous trouverez un bon exemple d'utilisation dans la documentation EventEmitter. Voici l'exemple de composant qui écoute les événements d'ouverture et de fermeture :
‹zippy (open)="onOpen($event)" (close)="onClose($event)"›‹/zippy›

Voici la définition du composant :

HTTP

HttpClient d'Angular renvoie des éléments observables à partir d'appels de méthodes HTTP.
Par exemple : http.get('/api') renvoie un observable. Cela offre plusieurs avantages par rapport aux API HTTP basées sur les promesses :

• Les observables ne modifient pas la réponse du serveur (comme cela peut être le cas lors d'appels then() en chaîne liés à des promesses). Au lieu de cela, vous pouvez utiliser une série d'opérateurs pour transformer les valeurs si nécessaire.
• Les requêtes HTTP sont annulables via la méthode unsubscribe().
• Les demandes peuvent être configurées pour obtenir des mises à jour d'événement de progression.
• Les demandes échouées peuvent être retentées facilement.

AsyncPipe

AsyncPipe s'abonne à un observable ou à une promesse et renvoie la dernière valeur qu'il a émise. Lorsqu'une nouvelle valeur est émise, le pipe marque le composant à vérifier pour les modifications.

L'exemple suivant lie l'observable "time" à la vue du composant. L'observable met continuellement à jour la vue avec l'heure actuelle.

Router

Router.events fournit des événements comme observables. Vous pouvez utiliser l'opérateur filter() de RxJS pour rechercher des événements d'intérêt et vous y abonner afin de prendre des décisions en fonction de la séquence d'événements dans le processus de navigation.

Le "ActivatedRoute" est un service de routeur injecté qui utilise pour obtenir des informations observables sur une voie d'itinéraire et les paramètres. Par exemple, ActivateRoute.url contient un observable qui indique le ou les chemins de la route.

Formulaires réactifs

Les formulaires réactifs ont des propriétés qui utilisent des observables pour surveiller les valeurs de contrôle de formulaire. Les propriétés FormControl, valueChanges et statusChanges contiennent des observables qui génèrent des événements de changement. S'abonner à une propriété de contrôle de formulaire observable est un moyen de déclencher la logique d'application au sein de la classe de composants.