Parent to Child Communication with Metadata in Angular 17
A parent component in Angular can transfer data or information to its child components using parent-to-child communication. This is an essential component of creating reusable and modular Angular applications. This is an overview of Angular 17’s parent-to-child communication features.
Prerequisites
What is Parent to Child Communication
In Angular 17, parent-to-child communication describes the process by which a parent component transmits information or data to its offspring components. By allowing components to interact with one another in a hierarchical framework, this communication makes it possible to create modular and reusable Angular apps.
Steps to Create an Angular Project
Step 1: Create an Angular application
ng new parentchild
Step 2: Create employee component using the following command
ng generate component employee
Folder Structure
Folder Structure
Dependencies
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
Example
Parent Component
<!-- app.component.html -->
<div style="text-align: center;">
Parent Component : <input type="text" #Pcomponent (keyup)="0"> <br /><br />
<app-employee [Pdata]="Pcomponent.value"></app-employee>
</div>
/* app.component.css */
h1 {
color: brown;
text-align: center;
text-decoration: underline;
}
//app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { EmployeeComponent } from './employee/employee.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, EmployeeComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'parentchild';
}
Child Component :
<!-- employee.component.html -->
Value of Parent Component:{{Pdata}}
/* employee.component.css */
h1{
color:blueviolet;
text-align: center;
text-decoration: underline;
}
// employee.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-employee',
standalone: true,
imports: [],
templateUrl: './employee.component.html',
styleUrl: './employee.component.css',
inputs: ['Pdata']
})
export class EmployeeComponent {
Pdata: any
}
To start the application run the following command
ng serve --open
Output
Parent to Child Communication with Metadata in Angular 17
Contact Us