Component output properties

Muy buenas! Hoy os vengo con un mini tutorial sobre cómo usar esa directiva llamada @Output que tiene Angular.

Flujo:

@Output, nos sirve para pasarle el estado de una propiedad de un componente hijo a un componente padre mediante eventos que emiten valores a través de la función emit de EventEmitter.

Para realizar esta práctica lo primero que vas a necesitar es tener instalado Angular con una versión mayor a la 17, ya que el uso de @for no está disponible en versiones anteriores a esta y en el código lo utilizo.

Tras ello, necesitas dos componentes, al componente padre que escucha al componente hijo lo vamos a llamar TestparentcomponentComponent y al componente hijo que notificará al componente padre esperando que este reaccione lo vamos a llamar TestchildcomponentComponent.

testparentcomponent.component.ts

import { Component } from '@angular/core';
import { TestchildcomponentComponent } from '../testchildcomponent/testchildcomponent.component';

@Component({
  selector: 'app-testparentcomponent',
  imports: [TestchildcomponentComponent],
  templateUrl: './testparentcomponent.component.html',
  styleUrl: './testparentcomponent.component.scss'
})
export class TestparentcomponentComponent {
  cadena : string[] = new Array();

  addName(nombre : string) {
    this.cadena.push(nombre);
  }
}

testparentcomponent.component.html

<p>testparentcomponent works!</p>
<app-testchildcomponent (name)="addName($event)"></app-testchildcomponent>
@for(i of cadena; track i) {
{{ i }}
}

testchildcomponent.component.ts

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

@Component({
  selector: 'app-testchildcomponent',
  imports: [],
  templateUrl: './testchildcomponent.component.html',
  standalone: true,  styleUrl: './testchildcomponent.component.scss'
})

export class TestchildcomponentComponent {
  @Output() name = new EventEmitter<string>();

  addItem() {
    this.name.emit("Hola");
  }

}

testchildcomponent.component.html

<p>testchildcomponent works!</p>
<button (click)="addItem()">Add item</button>

Tras ello, en el navegador aparecerá un botón al que podrás hacer click y además se irá añadiendo el texto de Hola consecutivamente.

Espero que te haya resultado útil el contenido de este POST.

Saludos,

Daniel Nager Carpio.