How to passing data from mother component to child component in angular.

In this article, we learn how to pass variable from one component to another component. I will show you how, just follow the steps clearly.

For more updates please do Subscribe via Email:

Passing data from mother component to child component in angular.

Table Of Contents

Overview
Preparation of the project
Implementation
Code StructuredMother Component
- Mother Components
- Child Component
Related Topics

Overview

Angular framework is one of the most known frontend technology used to develop any web application. It can easily integrate third party API backend technology. In angular also you can create a component for every page and create multiple child component page in side the component. And also you can pass any data to parameter in you child component.

First we need to create a angular project to implement the task of the topic. but here we assumed you are already created or generated a project and only to implement this in your current project. If you want to have a guide for create new angular project just refer here.

Preparation of the project

Next to create a main or mother component for this project. To create a component just run this command in your CLI.

ng g c motherC

for the broad explanation about this command, please refer this link here;

And for child component also run this command in your CLI. To create and this component inside the mother component folder your need to route the folder name “mother-c” and after make a slash “/” then the child component.

ng g c mother-c/childC

Implementation

First create a variable to a string type to hold a value for the data you want to past in your Child component.

Here I create a variable name passToChild and in the constructor I’ll stored a value “Code-Life” and this is what I want to pass and displayed in the child component.

Next make a preparation in the child component to received the data. defined a parameter as @Input(). This parameter hold the passing value from the mother component. And to enable the library defined this in the import above “OnInit”. And as you can see I defined another one variable named “data“. In this variable store the data from mother component and received from the getData parameter and during the component triggered the ngOnInit the value of getData stored to the variable data.

To called and pass the value just called it in the HTML tag.

And display it in the HTML component.

Code StructuredMother Component

Mother Components

– HTML component

<p>mother-c works!</p>
<br>
<app-child-c [getData]="passToChild"></app-child-c>

– Type Scrip component

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

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

  passToChild : string;

  constructor() {
    this.passToChild = "Code-Life";
  }
  ngOnInit(): void {
  }
}

Child Component

– HTML Component

<p>child-c works!</p>

<br>
<label>{{ data }}</label>

– Type Script Component

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

@Component({
  selector: 'app-child-c',
  templateUrl: './child-c.component.html',
  styleUrls: ['./child-c.component.css']
})
export class ChildCComponent implements OnInit {
  @Input() getData : any;

  data : string;

  constructor() {
  }

  ngOnInit(): void {
    this.data = this.getData;
  }
}

Happy Learning..

Thank you for visiting my blog site. Hoping you learn more here. please feel free to comment and suggest if there is need to enhance and update. thank you.

Github : https://github.com/JaveTLupango/PassDataToOtherComponent