The parent component can pass data to the child component through properties. There are two ways that define input properties for a component:
By creating an input array on the component decorator
By using the
@Input
decorator for decorating a class property
Using the component input array is simple and straightforward. Just declare an input array and populate it with strings that represent the name of the property you are expecting:
[app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'child-component', inputs: ['title'], template: `<h2>{{ title }}</h2>` }) export class ChildComponent {} @Component({ selector: 'app-root', template: ` <h1>Component Interactions</h1> <child-component [title]="title" ></child-component> ` }) export class AppComponent { private title: string = "Sub title for child"; }
In this example, we created a child component, which defined an input array...