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

Sending data to child components

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.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

10 Npm Modules Every Beginner Should Try

Create a Modal with React, Typescript and portals!

The Story of Hoodoke

React basics 1.0 :

Nullish Coalescing in TypeScript?? A Short Guide

Test Axios call in async function using JEST with TypeScript

Getting more out of your Pinia Stores — Vue Amsterdam Conference 2022 Summary series — Second Talk

PCF_Google Maps Marker Clusterer

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
Chun Ming Wang

Chun Ming Wang

More from Medium

Pure vs Impure pipe Performance

Angular Components….

Angular Guidelines —

What are the basics of angular?