Activity Forums Salesforce® Discussions How to pass data to a Nested component in Salesforce?

  • Archit

    Member
    March 29, 2018 at 12:32 pm

    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!

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos