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

Last Updated : 07 Aug, 2024

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.

Parent Component

app.component.ts There are two arrays. One for list_prog – list of languages, prog_details – details of languages.

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.

<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>

Child Component

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.

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

<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>