Método Angular Subscribe()

Presentaremos el método subscribe() de Angular y lo usaremos en nuestra aplicación.

Angular Subscribe

Subscribe() es un método en Angular que conecta el observer con eventos observable. Siempre que se realiza algún cambio en estos observables, se ejecuta un código y observa los resultados o cambios mediante el método subscribe. Subscribe() es un método de la biblioteca rxjs, utilizado internamente por Angular.

Los boletines son la parte más común de los sitios web ahora; imaginémoslos como un evento observable y nosotros como observadores. Cuando ingresamos nuestro correo electrónico al formulario de boletín en cualquier sitio web, nos suscribimos a un evento observable. Cada vez que se publique un nuevo boletín de ese sitio web, lo recibiremos en nuestro correo electrónico hasta que cancelemos la suscripción a ese evento.

De manera similar, nos suscribimos a esa función si tenemos alguna función que queremos observar en una aplicación Angular. Cada vez que se realiza algún cambio en esa función, podemos ver el cambio usando el método subscribe().

Subscribe() toma tres métodos como parámetro: next, error y completo.

1. Usando el método next, podemos pasar cada valor emitido por el observable.
2. Usando el método error, podemos pasar cualquier error que ocurra en algún lugar de la secuencia.
3. Usando el método complete, podemos pasar valores una vez que se completa todo el evento observable.

Veamos un ejemplo para entender subscribe() en detalle. Primero, crearemos un nuevo archivo de servicio como subscribe.service.ts en el que crearemos la función assignValue() que pasará un valor al observador usando el método next.

Nuestro código en subsribe.service.ts se verá así.

# 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;
  }
}

A continuación, importaremos este servicio en app.module.ts y dentro de @NgModule lo definiremos como proveedores.

# 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 {}

En el siguiente paso dentro del archivo app.component.ts, crearemos un constructor para nuestro servicio y una función que obtendrá valor del observador. Y no olvides importar nuestro servicio en el archivo 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);
    });
  }
}

Ahora, crearemos una plantilla en app.component.html.

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

Producción: