Pass data to Array of Child Components in Angular

Question

I have parent component and child components in my project and array of objects called from API in parent component.

public Questions = [];
ngOnInit(): void {
    this.loadQuestions();
}

<div *ngIf="Questions ">
   <app-child-card *ngFor="let item of Questions; index as i;" [data]="item" [index]="i" ></app-child-card>
</div>

@Input() data: any;
@Input() index: any;
ngOnInit(): void {
    console.log(this.data, this.index);
}

Even if my questions array is empty, child component got rendered exact three times in each try and got output undefined undefined in console.

Sounds strange. I can't see anything wrong with the code you have posted, my best guess is that you're array is somehow set with three undefined items. Have you tried console logging the Questions array? — SnorreDan
– SnorreDan, Commented Aug 16, 2020 at 4:50

roya · Accepted Answer · 2020-08-16 04:51:24Z

4

empty array is accepted as true condition, so you need to change your condition to *ngIf="Questions.length>0"

answered Aug 16, 2020 at 4:51

roya

3142 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1