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

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:

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

Leave a Reply Cancel reply