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)