Angular Output and EventEmitter

From Logic Wiki
Jump to: navigation, search

https://www.youtube.com/watch?v=tZNWv-iW74I

In Child Component

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

export class ChildComponent{ 
    @Output() notify:EventEmitter<string> = new EventEmitter<string>();

somefunction{
    this.notify.emit('Done');

Here we declare "notify" as an event and when we enter somefunction we raise this event

In Parent Component

in html

<child (notify)="onNotifyClicked($event)"></child>

so in the tag we capture notify event and whenever it's emitted it will call onNotifyClicked

in ts

onNotifyClicked(message:string):void{
   this.showMessage = message;
}

To Use a Child Method from Parent

in Parent

import { ViewChild } from '@angular/core';
export class ....
 @ViewChild(ActionListComponent) actionListComponent :ActionListComponent;

and in anywhere in ts file

      this.actionListComponent.refreshList();