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.

• 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>

• Child Component

@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.

Answer 1

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