Establecer comunicación entre componentes hermanos en Angular 11

En este artículo, veremos cómo podemos pasar datos entre componentes hermanos en la máquina cliente. 

En Angular, dividimos nuestra página web en múltiples componentes y la relación entre estos componentes forma una estructura similar a un árbol. Un componente puede tener un padre y varios hijos. Dicho esto, también puede tener hermanos. En algunas situaciones necesitamos pasar datos entre estos componentes independientes. Pasar los datos es fácil y hace que nuestro código sea más limpio y legible mientras se trabaja en un proyecto grande.

Requisitos previos: NPM debe estar preinstalado.

Para entender cómo funciona, vea el siguiente diagrama:

• En caso de un evento de usuario, podemos emitir datos desde un componente.
• Estos datos se enviarán al componente principal.
• El componente principal puede transferir estos datos en forma de entrada al otro componente secundario.
• Es una transmisión unidireccional, pero podemos usarla en el otro sentido para hacer un canal de comunicación bidireccional.

En Angular, podemos lograr esto usando sus funciones integradas:

• El decorador @Output ayuda a emitir los datos a través de un objeto EventEmitter<T>. Veremos su funcionamiento a través del ejemplo.
• El componente principal capturará los datos como variable de $event. Puede usarlo en un método o transmitirlo por otros medios.
• Finalmente, el decorador @Input() usa una variable y cualquier entrada a través del padre se almacenará en esta variable.

Veamos todo esto a través de un ejemplo sencillo. En esta publicación, veremos una página web simple que toma palabras clave como entrada del usuario en un componente y muestra las filas coincidentes en otro componente.

Primero configuremos el entorno:

• Instalar clip angular. Ejecutar como administrador o usar sudo en caso de errores de permisos.

npm i -g @angular/cli

• Cuando la CLI angular esté instalada, inicie un nuevo proyecto con el siguiente comando:

ng new <project-name>

• Ahora pruébalo usando:

ng serve -o

• Si se puede acceder a la página de inicio angular en http://localhost:4200, la configuración se realizó correctamente. Borre el contenido de app.component.html antes de continuar.
• Después de eso, genere dos nuevos componentes:

ng generate component search
ng generate component table

• Verá dos directorios ‘buscar’ y ‘tabla’ en la carpeta de la aplicación. Ambos tendrán 4 nuevos archivos en cada uno.

Hagamos nuestro componente de búsqueda y emitamos un evento desde él. Primero en search.component.html escribe el siguiente código:

<br><br>
<div>
    <label for="search">Enter the text</label>
    <br>
    <br>
    <input type="text" id="search" placeholder="type some words" 
           (keyup)="emit(keyword.value);" #keyword>
</div>

En el código anterior, hay un campo de entrada simple que usa una función emit() cuando ocurre un evento keyup. Usaremos esto para emitir la palabra clave al componente principal. Definamos este método y evento en search.component.ts :

import { Component, EventEmitter, OnInit, Output } 
        from '@angular/core';
  
@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  
  constructor() { }
  ngOnInit(): void {
  }
  @Output() emitter:EventEmitter<string>
       = new EventEmitter<string>();
  
  emit(keyword){
      this.emitter.emit(keyword);
  }
}

El objeto emisor de tipo «string» emitirá el parámetro especificado en su método emit(). En el evento keyup, el método emit() ejecuta el método emit() del objeto emisor.

Ahora completemos el código en table.component.ts :

import { Component, DoCheck, Input, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit, DoCheck {
  data = [
    {name:"Liam", age:"20", post: "Marketing Coordinator"},
    {name:"Noah", age:"25" , post:"Medical Assistant"},
    {name:"Oliver", age:"22", post:"Web Designer"},
    {name:"William", age:"20", post:"Dog Trainer"},
    {name:"Bill", age: "22", post:"President of Sales"},
    {name:"James", age: "19", post:"Project Manager"},
  ];
  items = [];
  constructor() { }
  @Input() keyword:string;
  
  ngOnInit(): void {
    this.refresh();
  }
  
  ngDoCheck(){
    this.refresh();
  }
  
  refresh(){
    this.items = [];
    this.data.forEach(
      item => {
        if(item.name.search(this.keyword) != -1
         || item.age.search(this.keyword) != -1 
         || item.post.search(this.keyword) != -1) {
          this.items.push(item)
        }
      }
    ) 
  }
}

Hemos declarado un objeto de datos que son algunos datos estáticos para nuestra tabla para este ejemplo. 

• La variable «palabra clave» se define como Entrada para este componente usando el decorador @Input().
• Hemos declarado un método de actualización() que completa la lista de elementos utilizando si el contenido coincide en cualquiera de los campos con la variable «palabra clave».
• Hemos llamado a este método en los métodos ngDoCheck y ngOnInit (tenga en cuenta que tenemos que implementar la interfaz para ellos). El método ngDoCheck se denomina detección de cambios posteriores en la aplicación. Por lo tanto, siempre que la palabra clave cambie en padre, este método reemplazará la lista.
• Mostraremos esta lista en table.component.html usando el siguiente código:

<p *ngIf="!items.length">No results found</p>
  
<table class="table" *ngIf="items.length">
    <thead >
        <td>Name</td>
        <td>Age</td>
        <td>Post</td>
    </thead>
    <br>
    <tr *ngFor="let item of items">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.post}}</td>
    </tr>
</table>

El código anterior muestra la tabla presente en la array de «elementos». Ahora escribamos el código para el componente padre app.component.ts :

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'GeeksForGeeks';
  keyword = "";
  send(keyword){
    this.keyword = keyword;
  }
}

En el código anterior:

• Hemos declarado una variable de palabra clave.
• El método send() toma la palabra clave como parámetro y la establece en la variable de clase.
• Usaremos la variable de clase «palabra clave» como entrada al componente de la tabla.
• El evento emitido por el componente de búsqueda será manejado por el método send().
• Consulte el siguiente código para app.component.html :

<div>
  <app-search (emitter)="send($event)"></app-search>
</div>
<hr>
  
<div>
  <app-table [keyword]="keyword"></app-table>
</div>

En este código:

• La variable “$event” representa los datos emitidos desde el componente de búsqueda.
• La variable de palabra clave del componente de la tabla se pasa como [palabra clave].

Ahora guarde todos los archivos y pruebe el código usando:

ng serve -o

En http://localhost:4200 podemos ver el resultado.

Producción: