• Home
  • Angular
  • Angular 2, usando EventEmitter para comunicar dos Componente
3.0 / 5

Angular 2, usando EventEmitter para comunicar dos Componente

6.541K
3

Comunicación entre componentes.

Hola, buenas a todos, hoy les mostrare una forma de poder llamar un método que esta en un componente padre desde un componente hijo usando EventEmitter.

Esto nos ayuda bastante cuando tenemos algún método en el primer componente que queremos se ejecute desde algún botón en el segundo componente.

Por ejemplo tenemos el primer componente:

@Component({
    selector: 'jhi-home',
    templateUrl: './home.component.html',
    styleUrls: [
        'home.css'
    ],
    providers: [NgbProgressbarConfig]

})
export class HomeComponent implements OnInit {

   finalizar(event){
        console.log('Llamando al primer componente');
   }
}

Como vemos tenemos un método llamado finalizar, con un parámetro, un evento. Este evento sera ejecutado desde el segundo componente.

El segundo componente estaría de la siguiente manera:

Component({
    selector: 'jhi-segundoComponent',
    templateUrl: 'segundo.component.html'
})

export class SegundoComponent implements OnInit {
   @Output() finalizarEventEmitter = new EventEmitter<string>();

   finalizarSegundoComp() {
        this.finalizarEventEmitter.emit('complete');
    }
}

De esta forma tenemos un método finalizarSegundoComp(), este se llamaría desde algún botón en la vista, y ejecuta finalizarEventEmitter.

Desde nuestro HTML del primer componente pondríamos algo como lo siguiente:

<jhi-segundoComponent [mensajeChatDto]="usuarioSelecionado" (finalizarEventEmitter)="finalizar($event)"></jhi-segundoComponent>

De esta forma en el HTML del primer componente mostramos el segundo componente y le asociamos el finalizarEventEmitter con el método finalizar y enviamos como parámetro el evento.

EventEmitter nos sirve para poder realizar una comunicación entre componentes, entre otras funcionalidades, y para este caso es algo rápido y sencillo de entender.

THIS IS AN OPTIONAL

Related Post

Hola buenas a todos, hoy vamos a ver como poder usar JQuery en Angular2. Siempre, cuando hacemos

2 COMMENTS

LEAVE YOUR COMMENTS