Angular – How to pass values between components using @input and @output

By | 28/10/2020

In this post, we will see how to pass values between components using @input and @output.

We start creating a project called PassData where, we will create two components called page1 and page2 and an entity called User:
ng new PassData
ng g c pages/page1
ng g c pages/page2
ng g class Entities/User

First of all, we define the entity User:

[USER.TS]

export class User {
    User: string;
    Password: string;
}



Then, we will define the component page1 that we will use to send a value in the component page2

[PAGE1.COMPONENT.TS]

import { Component, OnInit, EventEmitter } from '@angular/core';
import { User } from 'src/app/Entities/user';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.css']
})
export class Page1Component implements OnInit {
  
  objUser: User = new User();
  constructor() { }

  ngOnInit(): void {
  }
}



[PAGE1.COMPONENT.HTML]

<form class="my-form"  #TestDataForm="ngForm">
    <label>Username:</label><input placeholder="Username"  [(ngModel)]="objUser.User" name="User" #Reference="ngModel" >
    <br/>
    <label>Password:</label><input placeholder="Password"  [(ngModel)]="objUser.Password" name="Password" #Reference="ngModel" >
 </form>

<app-page2 [inputUser]="objUser"></app-page2>



Finally, we define the component page2 where we will use a variable called inputUser with the @Input decorator.
@Input links a property of a component (which is generally the child component) with a value that was given by another component (the parent).

[PAGE2.COMPONENT.TS]

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { User } from 'src/app/Entities/user';

@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  styleUrls: ['./page2.component.css']
})
export class Page2Component implements OnInit {

  @Input() inputUser: User;

  constructor() { }

  ngOnInit(): void {
  }



[PAGE2.COMPONENT.HTML]

<h2>The values selected are: {{inputUser.User}} - {{inputUser.Password}}</h2>



Now, if we will run the application, this will be the result:

It works fine and now, we will define a variable with the @output decorator in order to send a value from page2 to page1.
@Output decorator is used to link a property of a child component and emit it through the event emitter. So the parent component can call the property and get the data emitted from it.

We start changing the component page2:

[PAGE2.COMPONENT.TS]

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { User } from 'src/app/Entities/user';

@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  styleUrls: ['./page2.component.css']
})
export class Page2Component implements OnInit {

  @Input() inputUser: User;
  @Output() IsUserOk = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit(): void {
  }

  CheckUser(value) {
    this.IsUserOk.emit(value);
  }
}



[PAGE2.COMPONENT.HTML]

<h2>The values selected are: {{inputUser.User}} - {{inputUser.Password}}</h2>

<br/>
<button (click)="CheckUser(true)">Acceptd</button>
<button (click)="CheckUser(false)">Reject</button>



Finally, we modify the component Page1, in order to get the value of the variable IsUserOk:

[PAGE1.COMPONENT.TS]

import { Component, OnInit, EventEmitter } from '@angular/core';
import { User } from 'src/app/Entities/user';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.css']
})
export class Page1Component implements OnInit {
  inputCheck: boolean;
  objUser: User = new User();
  constructor() { }

  getCheck(check) {
    this.inputCheck = check;
  }

  ngOnInit(): void {
  }
}



[PAGE1.COMPONENT.HTML]

<form class="my-form"  #TestDataForm="ngForm">
    <label>Username:</label><input placeholder="Username"  [(ngModel)]="objUser.User" name="User" #Reference="ngModel" >
    <br/>
    <label>Password:</label><input placeholder="Password"  [(ngModel)]="objUser.Password" name="Password" #Reference="ngModel" >
 </form>


<h2>The username and password are accepted: {{inputCheck}}</h2>
<br/><br/>
<app-page2 (IsUserOk)="getCheck($event)" [inputUser]="objUser"></app-page2>



Now, if we will run the application, this will be the result:



Leave a Reply

Your email address will not be published.