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

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)

--

--

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