How to pass data in angular?

Let’s start with setting up the project first.

ng new ng-Basics

After creating the project, let’s run the application.

ng serve

Our very first angular app is up and running and now open the browser and navigate to the localhost:4200 which is the default port of angular app and you will see the window with default data.

Now let’s clean the default data provided by the angular CLI presented in the above image which is coming from the app.component.html file.

After cleaning the data, let’s create a new component child and adding the child selector which is app-child to the app.component.html file.

ng g c child

we need to add the child selector like this to the app.component.html file and the output will look like this.

<app-child></app-child>

Passing data from parent to child component #

We will be passing the object which we are going to declare in the app.component.ts file.

sendData = {
  name: "Nick",
  age: 25,
  height: 175,
  weight: 100,
};

After declaring the object in the app.component.ts we need to declare a variable in app-component.html file with the help of property binding which will be use to pass the data from parent to child component.

<app-child [getData]="sendData"></app-child>

Now the data is send from parent component which we need to get by using the getData variable which we have declared app-component.html for that we need to import the @Input decorator in child.component.ts file.

@Input() getData: any;

We need to show the data coming from the parent component.

<div style="text-align: center;margin: 50px;">
  <p>Name: </p>
  <p>Age:  yrs</p>
  <p>Height:  cm</p>
  <p>Weight:  kg</p>
</div>

Passing data from child to parent component #

Creating a new function in app.component.ts file which will be use to pass the data from child to parent component.

sendData(data: any) {
    console.log(data);
  }

Now we need to pass the data from child to parent component. Here we have created a variable as getData in app-component.html file.

<app-child (getData)="sendData($event)"></app-child>

Going to the child.component.ts file we need to create a function which will send the data on click of the button to the parent component.

Before that we need the variable which we have declared inside app-component.html and we need to import the @Output decorator and EventEmitter from @angular/core in child.component.ts file so that whatever we are trying to achieve will be achieved using EventEmitter.

@Output() getData = new EventEmitter();

shareData() {
    this.getData.emit({
      name: 'Child',
      age: '20',
    });
  }

Atlast we need to create a button which will send the data in the child.component.html file.

<button (click)="shareData()">Send Data</button>

Note : Always refer to the official documentation of angular.

Basic example using parent, child and grand-child components #

Let’s start with setting up the project first.

ng new ng-example

After creating the project, let’s create the components required for this example.

ng g c parent
ng g c child
ng g c grand-child

Now let’s clean the default data from the files. Starting from the parent component. Changes needs to be done in the parent.component.ts and parent.component.html file.

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";

@Component({
  selector: "app-parent",
  templateUrl: "./parent.component.html",
  styleUrls: ["./parent.component.scss"],
})
export class ParentComponent implements OnInit {
  temporary!: number;
  constructor() {}

  ngOnInit(): void {}

  addInput = new FormGroup({
    input1: new FormControl("", Validators.required),
    input2: new FormControl("", Validators.required),
  });

  temporaryInput(input3: any) {
    this.temporary = input3;
  }
}

<form [formGroup]="addInput" class="form">
  <label>
    Input 1 :
    <input
      type="text"
      placeholder="Enter value"
      formControlName="input1"
    /><br /><br /> </label
  ><br />
  <label>
    Input 2 :
    <input
      type="text"
      placeholder="Enter value"
      formControlName="input2"
    /><br /><br /> </label
  ><br />

  <app-child
    [input1]="this.addInput.get('input1')!.value"
    [input2]="this.addInput.get('input2')!.value"
    (newInput)="temporaryInput($event)"
  ></app-child
  ><br /><br />

  Result = 
</form>
<br />

After adding the changes to the parent let’s move to child component. Changes needs to be done in the child.component.ts and child.component.html file.

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

@Component({
  selector: "app-child",
  templateUrl: "./child.component.html",
  styleUrls: ["./child.component.scss"],
})
export class ChildComponent implements OnInit {
  @Input() input1!: string;
  @Input() input2!: string;
  @Output() newInput = new EventEmitter<string>();

  constructor() {}

  ngOnInit(): void {}

  temporaryInput!: any;

  addInputNumbers(temporaryInput: any) {
    this.newInput.emit(temporaryInput);
  }
}

<app-grand-child
  [input1]="input1"
  [input2]="input2"
  (newInput)="addInputNumbers($event)"
>
</app-grand-child>

In last final changes needs to be done in the grand-child.component.ts and grand-child.component.html file.

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

@Component({
  selector: "app-grand-child",
  templateUrl: "./grand-child.component.html",
  styleUrls: ["./grand-child.component.scss"],
})
export class GrandChildComponent implements OnInit {
  @Input() input1!: string;
  @Input() input2!: string;
  @Output() newInput = new EventEmitter<string>();

  constructor() {}

  ngOnInit(): void {}

  temporaryInput!: any;

  addUserInput() {
    this.temporaryInput = parseInt(this.input1) + parseInt(this.input2);
    this.newInput.emit(this.temporaryInput);
  }
}

<button (click)="addUserInput()">Add Numbers</button><br /><br />