Emisor de eventos en Angular

1. ¿Qué es EventEmitter en Angular?
2. Uso de EventEmitter en Angular

Presentaremos EventEmitter en angular y el uso adecuado de EventEmitter en angular. Y también daremos un ejemplo de EventEmitter en angular.

¿Qué es EventEmitter en Angular?

EventEmitter es un módulo que ayuda a compartir datos entre componentes usando los métodos emit() y subscribe(). EventEmitter está en la capa Observables, que observa cambios y valores y emite los datos a los componentes suscritos a esa instancia de EventEmitter.

emit()

emit() es un método EventEmitter que emite un evento que contiene un valor dado.

# angular
emit(value?: A): void

emit() solo tiene un parámetro, value.

suscribirse()

subscribe() es un método EventEmitter que registra controladores para eventos emitidos por esta instancia.

# angular
subscribe(next?: (value: A) => void, error?: (error: any) => void, complete?: () => void) : Subscription

subscribe() tiene tres parámetros opcionales que se pueden usar para pasar valores, errores o notificaciones de finalización en EventEmitter.

• El parámetro next es un controlador personalizado para eventos emitidos.
• El parámetro error es un controlador personalizado para las notificaciones de error de este emisor.
• El parámetro complete es un controlador personalizado para una notificación de finalización de este emisor.

Uso de EventEmitter en Angular

Ahora, usaremos EventEmitter como ejemplo para entenderlo completamente. En este ejemplo, cambiaremos el color de fondo y el color de fuente del componente y mostraremos sus valores en otros componentes.

Entonces, antes que nada, configuraremos nuestro archivo app.module.ts e importaremos módulos y componentes.

# 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 { BgChangeComponent } from './bg-change.component';

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

Ahora, configuraremos nuestro archivo html para nuestro componente de aplicación y agregaremos el siguiente código en el archivo app.component.html.

# angular
<emitted (touch)="respond()" name="{{ name }}" [color]="color"></emitted>
<p>{{ response }}</p>
<p>{{ color }}</p>
<bg-change (colorChange)="changeColor($event)"></bg-change>

Aquí hemos usado changeColor($event) que es un EventEmitter, y estamos mostrando valores de EventEmitter en response y color.

Ahora configuraremos el archivo app.component.ts y estableceremos los valores para las variables name, response y color que se muestran cuando se carga la página por primera vez.

Definiremos una función respond(), que cambiará el valor del response.

También definiremos la función changeColor(), que establecerá el valor del color. Entonces, nuestro archivo app.component.ts se verá así:

# angular
import { Component } from '@angular/core';

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

  response = 'Background not changed yet';

  color = 'brown';

  respond() {
    this.response = 'Success';
  }

  changeColor(color) {
    this.color = color;
  }

}

Ahora editaremos nuestro archivo hello.component.ts y le agregaremos el siguiente código.

# angular
import {
  Component,
  Input,
  ElementRef,
  Renderer2,
  Output,
  EventEmitter,
  OnInit,
  OnChanges,
} from '@angular/core';

@Component({
  selector: 'emitted',
  template: `<h1
  (click)="emit()"
  >{{text}} {{name}}</h1>`,
})
export class HelloComponent implements OnInit, OnChanges {
  @Input() name: string;

  @Input() color = 'brown';

  text = 'It is';

  @Output()
  touch = new EventEmitter<string>();

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
  }

  ngOnChanges() {
    this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
  }

  emit() {
    this.touch.emit('touched');
  }
}

En el componente anterior, @component obtendrá la etiqueta emitida del archivo app.component.html y establecerá un color al inicializar. Cuando se hace clic en el botón, cambiará el color. También pasaremos text que se muestra al cargar.

Ahora agregaremos un nuevo archivo bg-change.component.ts. y agregue el siguiente código en él.

# angular
import {
  Component,
  ViewChild,
  ElementRef,
  Renderer2,
  EventEmitter,
  Output,
} from '@angular/core';

@Component({
  selector: 'bg-change',
  template: `<button 
  (click)="Bgchange()" 
  >{{content}}</button>`,
  styles: [`button { padding: 10px; }`],
})
export class BgChangeComponent {
  body = this.el.nativeElement.ownerDocument.body;

  activateColor = 'white';

  @Output()
  colorChange = new EventEmitter<string>();

  content = 'Change Page Background';

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  Bgchange() {
    this.colorChange.emit(this.activateColor);

    this.activateColor === 'white'
      ? (this.activateColor = 'red')
      : (this.activateColor = 'white');

    this.renderer.setStyle(this.body, 'background', this.activateColor);
  }
}

Así que nuestra salida se verá como a continuación.