Angular @Input, @Output and EventEmitter

In this tutorial, let's discuss on, how to interact between the components using @Input, @Output and EventEmitter.

@Input() - It is used to transfer data from parent component to the child component.

@Output() - It is used to send data from child component to the parent component using EventEmitter.

Let's create a parent component to hold the list of user information and a child component which gets the user information and displays it.

Create a UserListComponent which acts as parent component using the angular cli command.

ng g c user-list

Create a child component, UserInfoComponent using the command.

ng g c user-info

Let's create a new folder named interface and creating a file user.ts which defines the object type.

  export interface User {
      id: number;
      name: string;
  }

Open the user-list.component.ts file, and modify the code as below,

  import { Component, OnInit } from '@angular/core';
  import { User } from '../interfaces/user';
  @Component({
    selector: 'app-user-list',
    templateUrl: './user-list.component.html',
    styleUrls: ['./user-list.component.css']
  })
  
  export class UserListComponent implements OnInit {
  
    userList: User[] = [
      { id: 1, name: 'Andrew' },
      { id: 2, name: 'Max' },
      { id: 3, name: 'Johnson' }
    ];
    constructor() { }
  
    ngOnInit() {
    }
    printSelectedUser(user: User) {
      console.log(user.name);
    }
  }

In the above code, the userList holds the list of users.

Open the user-list.component.html file and modify the code as below.

  <div>
      <app-user-info *ngFor='let user of userList' [userInfo]='user' (selectedUser)="printSelectedUser($event)">
      </app-user-info>
  </div>

The app-user-info is the selector of the UserInfoComponent. This component will hold an Input property with the name userInfo that get the user details.
Here, we loop through the userList using the ngFor directive and provide each user variable as input to userInfo input property of the UserInfoComponent.

Now, let's look into the user-info.component.ts file.

  import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  import { User } from '../interfaces/user';
  
  @Component({
    selector: 'app-user-info',
    templateUrl: './user-info.component.html',
    styleUrls: ['./user-info.component.css']
  })
  export class UserInfoComponent implements OnInit {
  
    @Input() userInfo: User;
    @Output() selectedUser = new EventEmitter<User>();
    constructor() { }
  
    ngOnInit() {
    }
  
    selectUser(user: User) {
      this.selectedUser.emit(user);
    }
  }

This component will get each User object as input in userInfo input parameter.

Now in the user-info.component.html file we will use the object value. The user-info.component.html looks like.

<ng-container *ngIf="user">
	<p>{{user.name}}</p>    	
</ng-container>

The output rendered by html will be

Andrew
Max
Johnson

Whenever we click on any user in the list, then, the UserInfoComponent which is the child component, calls the selectUser() function, which will emit an event in the UserListComponent using selectedUser Output event emitter.

This event emitter will call printSelectedUser() function in the UserListComponent with emitted user object as parameter. The function will logs the name property of the user to the console.

Binding the output eventemitter to the parent component's function is done by the code mentioned as below in user-list.component.html file.

  <div>
    <app-user-info *ngFor='let user of userList' [userInfo]='user' (selectedUser)="printSelectedUser($event)">
    </app-user-info>
  </div>