Sending data from a parent component to a child component in Angular

Sending data to child components

Use the app-root as the parent component. In app.component.ts, write the following code:

import { Component } from '@angular/core';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
currentItem = 'Television';
}
import { Component, OnInit, Input } from '@angular/core';@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() item!: string; constructor() { } ngOnInit(): void {
}
}
<app-child [item]="currentItem"></app-child>
  1. Put the data in the parent component, of course.
  2. Add a data member with a definite assignment assertion operator in the child component.
  3. Decorate the data member in the child component with @Input().
  4. In the parent component’s HTML markup, add the child component tag.
  5. In the child component tag, add an attribute to assign the value of the data member in the parent component to the child component’s corresponding data member.

--

--

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