How to pass data to a Nested component in Salesforce?

The nested component exposes a property it can use to receive input from its container using the @Input decorator.

For the below code nested component is ready to receive input from it’s parent component.

@Component({
selector: ‘child-selector’,
template: ‘child.component.html’
})
export class ChildComponent {
@Input() title:string;
}

In the container component, we need to define the property we want to pass to the nested component. We call it childTitle:

@Component({
selector: ‘parent-selector’,
template: ‘parent.component.html’,
directives: [ChildComponent]
})
export class ParentComponent {
childTitle:string = ‘This text is passed to child’;
}

Now the container component should pass the value of childTitle to the nested component by settings this property with property binding

<div>
<h1>I’m a container component</h1>
<child-selector [title]=’childTitle’></child-selector>
</div>

Hope it helps!