How to pass data from Parent to Child component in Angular ? - GeeksforGeeks

12 Mar, 2021
We can use the @Input directive for passing the data from the Parent to Child component in Angular
Using Input Binding: @Input – We can use this directive inside the child component to access the data sent by the parent component. Here app.component is the Parent component and cdetail.component is the child component.
app.component.ts There are two arrays. One for list_prog – list of languages, prog_details – details of languages.
app.component.ts
import { Component } from '@angular/core';import { AbstractControl, FormBuilder,         FormGroup } from '@angular/forms';    @Component({    selector: 'app-root',    templateUrl: './app.component.html',    styleUrls: ['./app.component.css']})export class AppComponent {      list_prog = ['JAVA', 'C++', 'C',             'PYTHON', 'JAVASCRIPT'];      prog_details = [`Java is a widely used     platform independent language. Java was     developed by James Gosling.`, `C++ is     multi-paradigm and procedural oriented     language. Developed by Bjarne Stroustrup.`,     `C is a procedural language and     developed by Dennis Ritchie`, `Python is     a interpreted high level language     developed by Guido van Rossum`,     `Javascript is a language that conforms     the ECMAScript and developed by ECMAScript`];    options: number;    curr_info: string;    prog_title: string;      constructor() {}      onClick(lang) {        switch (lang) {            case 'JAVA':                this.options = 0;                this.curr_info =                     this.prog_details[this.options];                  this.prog_title =                     this.list_prog[this.options];                break;            case 'C++':                this.options = 1;                this.curr_info =                     this.prog_details[this.options];                  this.prog_title =                     this.list_prog[this.options];                break;            case 'C':                this.options = 2;                this.curr_info =                     this.prog_details[this.options];                  this.prog_title =                     this.list_prog[this.options];                break;            case 'PYTHON':                this.options = 3;                this.curr_info =                     this.prog_details[this.options];                  this.prog_title =                     this.list_prog[this.options];                break;            case 'JAVASCRIPT':                this.options = 4;                this.curr_info =                     this.prog_details[this.options];                  this.prog_title =                     this.list_prog[this.options];                break;            default:                break;        }    }}
app.component.html Here we have added our child component inside the parent component and pass two data one is prog_title and another is curr_info. But make sure you have already declared variable details and title inside the child component.
HTML
<div class="container">    <div class="row">        <div class="col-md-3"></div>        <div class="col-md-6">            <h4 class="makeCenter">                List of Programming Languages            </h4>            <ul class="uList">                <li *ngFor="let lang of list_prog"                [ngClass]=            "{'active': list_prog[options]===lang}"             (click)="onClick(lang)" class="lLang">                    {{lang}}                </li>            </ul>        </div>    </div></div><br><br><br><app-cdetail [title]="prog_title"     [details]="curr_info"></app-cdetail>
cdetail.component.ts Here we have used the @Input() directive inside the child component. Now in the child component, the data passed by the parent component can be used.
Javascript
import { Component, Input, OnInit } from '@angular/core';  @Component({  selector: 'app-cdetail',  templateUrl: './cdetail.component.html',  styleUrls: ['./cdetail.component.css']})export class CdetailComponent implements OnInit {    @Input() details: string;  @Input() title: string;    constructor() { }    ngOnInit(): void {  }  }
cdetail.component.html
HTML
<div class="container">    <div class="row">        <div class="col-md-4"></div>        <div class="col-md-4">            <h3 class="makeCenter">{{title}}</h3>            <p style="text-align: justify;                 text-justify: inter-word;">                {{details}}            </p>        </div>    </div></div>
AngularJS-Questions
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?