CODEWITHSUNDEEP
htmlangulartypescriptdata-binding
Roka545
Roka545

Reputation: 3626

Passing data to nested component with ngFor

I have a parent component (ParentComponent) whose html has several child components (ChildComponent). The number of child components displayed depends on the length of an array using an ngFor. I'm trying to figure out how to set a property on each of the child components in the template.

Here is my ParentComponent html:

    <div>
        <p-panel header="Parent Component Manager">
            <p-panel header="ChildComponents">
                <childComponent *ngFor="let cComponent of cComponentsArray" [name]="childComponentTitle">
                </childComponent>
            </p-panel>
        </p-panel>
    </div>

My ParentComponent.component.ts file contains (I want to stop using this and use string values from cComponentsArray:

childComponentTitle: string = "This text is passed to child."

My ChildComponent html:

<p-accordion [multiple]="true">
    <p-accordionTab header="ChildComponent name: {{name}}">
        <h4>Random text</h4>
        <h4>Random text</h4>
    </p-accordionTab>
</p-accordion>

My ChildComponent.component.ts file contains:

@Input() name: string;

With the current code above this will set EACH of the child components "name" property to the same thing. I would like to set it according to a string value contained within cComponent of cComponentsArray.

I've tried using in ParentComponent.html

[name] = {{cComponent.name}}

without any luck. Could someone explain to me what I'm doing wrong and how to properly implement this?

Upvotes: 2

Views: 4249

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657038

[] and {{}} can never be used together.

Just use 

[name]="cComponent.name"

Upvotes: 2

Related Questions