Méthode Angular Subscribe()

Nous allons introduire la méthode subscribe() d’Angular et l’utiliser dans notre application.

Angular Subscribe

Subscribe() est une méthode dans Angular qui connecte le observer aux événements observable. Chaque fois qu’une modification est apportée à ces observables, un code est exécuté et observe les résultats ou les modifications à l’aide de la méthode subscribe. Subscribe() est une méthode de la bibliothèque rxjs, utilisée en interne par Angular.

Les newsletters sont désormais la partie la plus courante des sites Web. imaginons-les comme un événement observable et nous comme des observateurs. Lorsque nous entrons dans notre formulaire e-mail à la newsletter sur n’importe quel site Web, nous nous abonnons à un événement observable. Chaque fois qu’un nouveau bulletin d’information est publié à partir de ce site Web, nous le recevrons dans notre courrier électronique jusqu’à ce que nous nous désabonnions de cet événement.

De même, nous nous abonnons à cette fonction si nous avons une fonction que nous voulons observer sur une application Angular. Chaque fois qu’une modification est apportée à cette fonction, nous pouvons voir la modification en utilisant la méthode subscribe().

Subscribe() prend trois méthodes en paramètre : next, error et complete.

1. En utilisant la méthode next, on peut passer chaque valeur émise par l’observable.
2. En utilisant la méthode error, nous pouvons transmettre toute erreur se produisant quelque part dans le flux.
3. En utilisant la méthode complete, nous pouvons transmettre des valeurs une fois que l’ensemble de l’événement observable est terminé.

Passons en revue un exemple pour comprendre subscribe() en détail. Tout d’abord, nous allons créer un nouveau fichier de service sous le nom de subscribe.service.ts dans lequel nous allons créer la fonction assignValue() qui passera une valeur à l’observateur en utilisant la méthode next.

Notre code dans subsribe.service.ts ressemblera à ceci.

# angular
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SubscribeService {
  assignValue() {
    const SubscribeObservable = new Observable((observer) => {
      observer.next('Angular');
    });
    return SubscribeObservable;
  }
}

Ensuite, nous importerons ce service dans app.module.ts et à l’intérieur de @NgModule, nous le définirons en tant que fournisseurs.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { SubscribeService } from './subscribe.service';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [SubscribeService],
})
export class AppModule {}

Dans l’étape suivante à l’intérieur du fichier app.component.ts, nous allons créer un constructeur pour notre service et une fonction qui obtiendra la valeur de l’observateur. Et n’oubliez pas d’importer notre service dans le fichier app.component.ts.

# angular
import { Component, VERSION } from '@angular/core';
import { SubscribeService } from './subscribe.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  constructor(private SubscribeService: SubscribeService) {}

  ngClick() {
    this.SubscribeService.assignValue().subscribe((result) => {
      console.log(result);
    });
  }
}

Maintenant, nous allons créer un template dans app.component.html.

# angular
<hello name="{{ name }}"></hello>
<button (click)="ngClick()">Click Here to see result</button>

Production :