CODEWITHSUNDEEP
angulareventemitter
Ross
Ross

Reputation: 415

Handling Events between Angular components

I have 2 Angular components one to emit an event the other to handle the event.

Here is my code to emit the event

@Output() displayMessage: EventEmitter<number> = new EventEmitter();

.....

showMessage(args) {
    this.cellComponent = args.cell as IgxGridCellComponent;
    this.displayMessage.emit(this.cellComponent.rowIndex);
  }

I need my other component to handle the event passing the payload to a method within the receiving component.

This is what I have tried so far but I cant get the component to handle the event

TabcontrolComponent

@Input() messageToDisplay: number;

  public showMessage() {
    this.displayMessageHandler();
  }

  private displayMessageHandler() {
   //Invoke service
  }

TabcontrolComponent Templete

<app-tabcontrol></app-tabcontrol> 
      //I assume I need to bind to the event here, some how!

I need to handle the displayMessage events payload and ultimately pass it to the the showMessage() method.

Upvotes: 0

Views: 464

Answers (1)

Jasdeep Singh
Jasdeep Singh

Reputation: 8321

You need to bind it using event binding syntax like below:

<app-tabcontrol (displayMessage)="showMessage($event)"></app-tabcontrol>

Also receive the payload in your parent component file like below:

TabcontrolComponent

@Input() messageToDisplay: number;

  public showMessage(index: any) {   // cast it to type passed from children.
    this.displayMessageHandler();
  }

  private displayMessageHandler() {
   //Invoke service
  }

Upvotes: 1

Related Questions