How to pass data from Parent to Child component in Angular ?
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.
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> |
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.
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> |
Output
.png)
