En Angular, no es posible compartir datos de manera directa entre componentes. Sin embargo, Angular proporciona decoradores que permiten dicha comunicación. Los decoradores @Input y @Output te permiten establecer la comunicación entre dos componentes y pasar valores de variables. Aquí tienes un ejemplo de comunicación entre un componente padre y un nuevo componente llamado Hijo. Ejecuta el siguiente comando para crear el componente Hijo:

ng g c hijo

app.component.ts

En este archivo solo declaramos la variable de intercambio

export class AppComponent {
  texto = 'intercambio de datos';
}

hijo.component.ts

En este archivo se realiza la importación de Input, Output y Eventemitter. Con este último, se establece una conexión entre el campo de texto del componente hijo y el componente padre.

Utilizando el decorador Input se declara la variable texto, en esta vendrá el dato que se mande desde el componente padre.

y por último se usa el decorador Output para crear una instancia de EventEmitter llamada textoChange y enseguida se se declara el método emitChange, que en su interior indica que textoChange pasará su información al componente padre.

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-hijo',
  templateUrl: './hijo.component.html',
  styleUrls: ['./hijo.component.css']
})
export class hijoComponent {
  @Input() texto?: string;

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

  emitChange()
{
  this.textoChange.emit(this.texto);
}
}

app.component.html

Aquí se coloca un campo de texto que será utilizado para el intercambio de datos. Este campo de texto emplea la directiva [(ngModel)] para establecer una conexión con la variable denominada «texto».

En el componente <app-hijo>, se utiliza la propiedad [texto], la cual es posible gracias al uso de la convención de EventEmitter. Esta convención establece que se utiliza la primera palabra de la instancia, en este caso, «texto», seguido de «Change» y simplemente se asigna a la variable texto del componente.

    <input type="text" class="form-control" [(ngModel)] ="texto">
<app-hijo [(texto)]="texto"></app-hijo>

hijo.component.html

En esta vista se incluye un campo de texto que, al detectar el evento (keyup), invoca al método emitChange(). Además, se utiliza la directiva [(ngModel)] para vincularlo con la variable texto.

<h2>Componente hijo</h2>
<input type="text" class="form-control" (keyup)="emitChange()" [(ngModel)] ="texto">

Al ejecutar la aplicación, notarás que cuando editas el campo del componente padre, el campo del componente hijo se sincroniza y viceversa.

Así concluye este breve tutorial sobre intercambio de datos en Angular. ¡Hasta la próxima entrada!

• Sin categoría