How to send data from the Parent to Child component in Angular ? Mostly asked Interview Question

Parent Child Component

For Communicating in Parent Component and Child Component. There are many ways to do so. Whenever We use any component as selector inside view of Another component it become child component. So most of time we need to provide some data to child component.

Angular given us @Input() decorator in Child component and through Property Binding in Parent’s view.

Coding Example :

Child Component

import { Component, Input } from ‘@angular/core’;

@Component({

selector: ‘app-child’,

template: `

<h3>Hi:</h3>

<p>Welcome, {{name}}!</p>

`

})

export class HeroChildComponent {

@Input() name: String;

}

Now Parent Component

Parent Component

import { Component, Input } from ‘@angular/core’;

@Component({

selector: ‘app-parent’,

template: `

<app-child [name]=”userName” > </app-child>

`

})

export class HeroChildComponent {

userName:string = “RAM”;

}

There are Other ways also.

Using Session storage.

Using Service( Using Direct variable or RXJS Subject)

--

--

--

Software Engineer | Bharat Swabhiman Patanjali Social Activist | Speaker | Motivator | Yoga Trainer

Recommended from Medium

Load More Data in Laravel Using Ajax jQuery

How Does Hoisting Work in Javascript ES6?

Mongoose at a Glance

Disable Sorting On Specific Columns In Datatable

Environment variables for containerized Vue.js applications and how to set them at runtime

History of Asynchronous Javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ACHARYA ANIL SURYAVANSHI

ACHARYA ANIL SURYAVANSHI

Software Engineer | Bharat Swabhiman Patanjali Social Activist | Speaker | Motivator | Yoga Trainer

More from Medium

How to write parameterized tests in Jasmine

Passing data from a parent to child component in Angular

Angular — new emerging web technology

Understanding Dragula.js (Drag-n-Drop library) events