How to pass data from Parent to Child component in Angular ? Last Updated : 07 Aug, 2024 Comments Improve Suggest changes Like Article Like Report We can use the @Input directive for passing the data from the Parent to Child component in AngularUsing 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 Componentapp.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 Componentcdetail.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 Comment More infoAdvertise with us Next Article Passing data from Child to Parent Component in Angular A amitsingh48 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads Passing data from Child to Parent Component in Angular In Angular, passing data from a child component to its parent component involves emitting events. Essentially, the child component emits an event containing the data that the parent component needs to receive. This is typically achieved using Angular's EventEmitter class, where the child component e 3 min read How to Pass Data From Child Component To Its Parent In ReactJS ? In ReactJS, the flow of data is typically one-way, meaning data is passed from parent to child components using props. However, there are situations where you may need to pass data from a child component back up to its parent component. In this article, we will cover how to pass data from a child co 5 min read How to Update Parent Data from Child Component in VueJS? In Vue.js, communication between components is essential for building dynamic applications. One common scenario is updating the parent component's data from a child component. we will cover several ways to achieve this, including custom events, and v-model. Updating parent data from a child componen 3 min read How To Pass Props From Parent to Child Component in ReactJS? ReactJS is a powerful library that helps developers build interactive user interfaces by breaking them into reusable components. One of the essential features of React is the ability to pass data between components using props. In React, props allow parent components to send data or functions to chi 3 min read How to communicate from parent component to the child component in Angular 9 ? Angular makes the communication between components very easy. In this article, we will learn how to communicate from a parent component to the child component. Approach: Let's create two components: parent child In the parent component, declare the property that you want to receive in the child comp 2 min read How to set Parent State from Children Component in ReactJS? To set the parent state from a child component, we use React’s unidirectional data flow. Instead of directly passing data, we pass a function that enables the child to send data back to set the parent state.Prerequisites:React JSuseState HookApproachTo set parent state from child component in React, 2 min read Like