Output en angular es la forma mas sencilla de pasar parámetros de un componente a otro y la forma como funciona es muy sencilla.
Recordemos que tenemos observables y subjects como el ejemplo pasado, estos también nos ayuda para pasar un mensaje de punto a punto.
Explicando Output en angular (7)
Anteriormente se explico como funciona input que son métodos nativos para pasar parámetros a otro componente.
En esta ocasión vamos a regresar valores a un componente superior.
Con esto no solo pasamos parámetros de texto podemos mandar objetos o una respuesta procesada, en fin podemos hacer muchas cosas y regresar el mensaje que nos servirá en nuestro componente.
Tenemos que recordar que funciona de la siguiente manera:
Página principal / contenedor llama a componente > componente interactua y se acciona un disparador > se procesa la información > contenedor recibe información.
Como se usa output en angular
en este caso usaremos 2 componentes:
- rango
- fechas
rango sera el que espera respuesta y fechas el que contiene el output.
Fechas html
<div class="meses">
<span (click)="month(0)" [ngClass]="{'active': selectedMonth == 0}">ene</span>
<span (click)="month(1)" [ngClass]="{'active': selectedMonth == 1}">feb</span>
<span (click)="month(2)" [ngClass]="{'active': selectedMonth == 2}">mar</span>
<span (click)="month(3)" [ngClass]="{'active': selectedMonth == 3}">abr</span>
<span (click)="month(4)" [ngClass]="{'active': selectedMonth == 4}">may</span>
<span (click)="month(5)" [ngClass]="{'active': selectedMonth == 5}">jun</span>
<span (click)="month(6)" [ngClass]="{'active': selectedMonth == 6}">jul</span>
<span (click)="month(7)" [ngClass]="{'active': selectedMonth == 7}">ago</span>
<span (click)="month(8)" [ngClass]="{'active': selectedMonth == 8}">sep</span>
<span (click)="month(9)" [ngClass]="{'active': selectedMonth == 9}">oct</span>
<span (click)="month(10)" [ngClass]="{'active': selectedMonth == 10}">nov</span>
<span (click)="month(11)" [ngClass]="{'active': selectedMonth == 11}">dic</span>
</div>
<button class="ok" (click)="applyDates()">Seleccionar
</button>
para el archivo ts vamos a usar lo siguiente de @angular/core :
- EventEmitter – es una clase que permite emitir eventos personalizados en angular.
- Output – decorador que nos dejara pasar datos entre componentes
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-fecha',
templateUrl: './fecha.component.html',
styleUrls: ['./fecha.component.scss']
})
export class FechaComponent implements OnInit {
selectedYear: number;
selectedMonth: number;
@Output() public monthSelected = new EventEmitter<any>();
constructor() { }
ngOnInit() {
let date = new Date();
this.selectedYear = date.getFullYear();
this.selectedMonth = date.getMonth();
}
month(mes: number) {
this.selectedMonth = mes;
}
applyDates() {
this.monthSelected.emit({mes: this.selectedMonth, ano: this.selectedYear});
}
}
en este caso podemos ver que EventEmitter contiene un valor any por que le paso un array, pero ahí puede tener cualquier otro tipo especificado (string, number, boolean).
Aquí si seleccionamos un div del mes pasara el numero y se le asignara a selectedMonth.
Cuando tocan el botón de seleccionar este entra a una función donde usamos el nombre del output y le asignamos el valor usando la función emit.
applyDates() {
this.monthSelected.emit({mes: this.selectedMonth, ano:
this.selectedYear});
}
Esta función hace el envió del parámetro a nuestro componente padre.
Como recibir output en angular
En nuestro componente principal o padre vamos a llamar de la siguiente manera a nuestro componente fecha
<app-fecha (monthSelected)="showDateto($event)"></app-fecha>
como podemos ver monthSelected va entre paréntesis, esto hace que sea un decorador muy parecido al (click).
EventEmitter lo que hace es que en la respuesta devuelva un tipo event, por este motivamos pasamos a la función del padre el $event
En nuestra clase principal del padre creamos el evento
showDateto(event) {
//enseña lo que elegistes en el input
alert((event.mes + 1) + '/' + event.ano);
}
con esto podemos recibir parámetros de un componente a otro usando ouput en angular.
Vista
No olvides que si te gusta unprogramador, puedes suscribirte en nuestro canal de telegram asi como nuestras redes sociales, para que te lleguen notificaciones de nuevos post.