Categorias
iiiiii
Enviar dato desde el Hijo al padre
Descripcion
se enviara un dato desde el componente hijo hacia
Nota
<!--Vista del hijo HijoComponent.html -->
<li (click)="OnclickHijo()">Dato hijo</li> <!-- usar un evento angular [onclick] y
OnclickHijo es una funcion componente hijoj para enviar un dato hacia el padre -->
<!--Inicio Vista padreComponent.html-->
<!--
Cuando el evento enviarDato del hijo se dispare llamaremos una funcion RecibirDatoHijo($event) con el
parametro de entrada $event que es como se usa para recibir datos del evento enviarDato
-->
<app-padre (enviarDato)="RecibirDatoHijo($event)">
</app-padre>
<!--Fin Vista padreComponent.html-->
html
//Inicio hijoComponent.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
//Output Se debe importar para crear una variable de salida
//EventEmitter se debe importar para crear un eventoEmitido desde el hijo hacia el exterior
export class HijoComponent implements OnInit {
//Se crea el nuevo Metodo con el nombre enviarDato. esto sera una funcion que podra ser escuchada desde el padre
@Output() enviarDato = new EventEmitter<number>(); //de tipo numerico
//se crea la funcion onclickHijo para disparar el this.enviarDato.emit(datoenviar)
OnclickHijo(){
this.enviarDato.emit(1);
}
}
// FIN hijoComponent.ts
/******************************************************************************************************/
//Inicio padreComponent.ts
@Component({
selector: 'app-padre',
templateUrl: './padre.component.html'
})
export class PadreComponent implements OnInit {
RecibirDatoHijo(id:number){
console.log("recibiendeo mensaje del hijo :"+id);
//Imprimira un 1 que fue el valor que se le envio
}
}
//Fin padreComponent.ts