@Input and @Output In angular

In this article, you will learn about @Input and @Output in angular. You can establish communication between child and parent components using @Input and @Output decorators. @Input and @Output in angular are used to share data between a child component and parent component. By using the @Input decorator, the parent component can update data from the child component. Also, by using the @Output decorator you can send data from child component to parent component.

@Input Decorator:

By using the @Input decorator, the parent component can update data from the child component. In angular, @Input is used to create input property which is used for property binding. @Input is added as a prefix to the component property to use as input property.

To create a parent-child relation, create a UserComponent using the following command:

ng g c user

Now put the following code in the app.component.html file

<h2 style="text-align: center;">@Input and @Output in angular</h2>
<div>
  <app-user></app-user>
</div>

By doing the above steps, parent-child relation is created. Here AppComponent is the parent component and UserComponent is the child component. Now by using @Input and property binding we can share data from AppComponent to UserComponent. Now, create userData property which will contain data of different users.

Put the following code in the app.component.ts file to create data of users.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userData = [
    {
      id: 1,
      name: "John"
    },
    {
      id: 2,
      name: "Jane"
    },
    {
      id: 3,
      name: "Tom"
    }
  ];
}

Now userData variable can be passed to UserComponent by using property binding on a selector.

<app-user [userData]="userData"></app-user>

Now to fetch data from parent component AppComponent in child component UserComponent, add @Input property in UserComponent.

@Input() userData;

Now use *ngFor for looping through userData property.

<div *ngFor="let user of userData">
  {{user.id}}. {{user.name}}
</div>

Now, run your project using the ng serve command. You will see the following output.

@Output Decorator:

By using the @Output decorator you can send data from child component to parent component. The child component uses the @Output property to push an event to notify the parent component of the change. @Output property uses EventEmitter class which can be used to emit custom events.

Import @Output and EventEmitter into UserComponent.

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

Declare @Output property in UserComponent.

@Output() updatedUserData: EventEmitter<any> = new EventEmitter();

Add addUser() method in UserComponent to update userData.

addUser() {
  const newUser = {
    id: 4,
    name: 'Steve'
  };
  this.userData.push(newUser);
  this.updatedUserData.emit(this.userData);
}

Now add property binding on selector from the app.component.html file.

<app-user [userData]="userData" (updatedUserData)="getUpdatedData($event)"></app-user>

Now add getUpdatedData() method into the app.component.ts file for accepting data from child UserComponent.

getUpdatedData(data): void {
  this.userData = data;
}

Now, sending data from child to parent (UserComponent to AppComponent) and accepting data in the parent component(AppComponent) is completed. If you click on the ‘Add User’ button from UI then the userData property from UserComponent will be updated with a new additional user ‘Steve’ and that data will be sent to AppComponent. Then from getUpdatedData() method, the userData property from AppComponent will get updated. So, data gets sent from the child component to the parent component.
But as we are passing the userData property as @Input to UserComponent, the userData property will get updated in UserComponent and the user list will get updated.
You will see the following output on UI.

Summary:

In this article, you learned how to use @Input and @Output decorators in angular to pass data from child to parent and vise versa.
If you have any questions related to this article, you can ask them in the comment section.