Angular: Component Interaction with @Input, @Output and EventEmitter

Introduction

The data sharing between components is an essential part of our Angular application. It is all about component interaction. In this post, we will see how to share data between parent and child components using @Input and @Output decorators. 

@Input Decorator - Parent to child

The @Input decorator attaches property in the child component with a value that was passed by the parent component. It is a decorator that makes a class field as an input property. During change detection, the input property is automatically updated with the DOM property's value updated by Angular. 

Suppose we have a parent component called a parentTreeComponent and another component childTreeComponent. The parent component will send data or message to the child component and display the same in the child component. 
So for this, first we will create a message in the parent-tree.component.ts file as below:

export class parentTreeComponent implements OnInit {
  messageToInput: string = "Hello Input Decorator";
  constructor() { }

  ngOnInit() {
  }
}
Now we will define a variable receivedMessage in the child.tree.component.ts file that will display the message from the parent to the child component

export class childTreeComponent implements OnInit {
   @Input() receivedMessage: string;
  constructor() { }

  ngOnInit() {
  }
}
In parent.tree.component.html file, we will pass the parent message to the input child property as below:
 <app-child [receivedmessage]="messageToInput"></app-child>

@Output Decorator - Child to Parent

The @Output decorator is used to attach the property of a child component and emits it through the event emitter. Using this event emitter, the parent component can handle or call the property and get the data emitted from the child component. The DOM property which bounds to the output decorator property is updated by itself during change detection.
Now we will define a string variable in the parent-tree.component.ts file which represents the message send by child component.

export class parentTreeComponent implements OnInit {
  receivedMessageFromChild: string;
  constructor() { }

  ngOnInit() {
  }
}

Now we will define the message property in the child component which we will send to the parent component. Using @Output decorator we will add the property and make it a new EventEmitter. In EventEmitter we need to specify the type which will be omitted by EventEmiiter. In our case, we have defined it as type string. In the same file, we will define a function to emit our message so that parent can receive it. So we will define a message sendToParent in the child-tree.component.ts file.

export class childTreeComponent implements OnInit {
@Output() messageToSendToParent = new EventEmitter();
  constructor() { }
  ngOnInit() {
  }

 sendToParent(message: string) {
    this.messageToSendToParent.emit(message);
}
}

We will call this function on the click of a button in the child-tree.component.html file as follows:
<button (click)="sendToParent(messageToSend)">Send</button>

Now we will tell the parent to point our emitter and catch the message sent by the child component. Just define a function in your parent component ts file to get the message and pass it to the parent variable. We will define a function getMessage() in the parent-tree.component.ts file for the same.

export class parentTreeComponent implements OnInit {
  receivedMessageFromChild: string;
  constructor() { }

  ngOnInit() {
  }
   getMessage(message: string) {
    this.receivedMessageFromChild = message;
  }
}

In the parent-tree.component.html file we will use the parenthesis we targeted our Emitter and then we will assign the payload or message(using $event) send by child component to our getMessage() function in the parent as follows:
<app-child (messageToSendToParent)="getMessage($event)"></app-child>  

Comments