Pass array of objects to component not working

Question

I am wondering why this is working:

<div *ngFor="let image of recipesList | slice:0:10">
   <div>{{image.recipe_id.food_name}}</div> <!-- Outputs a list of food names -->
</div>

And why I am not able to pass this recipesList (array of objects) data into a component

<app-planning [recipeData]="recipesList"></app-planning>

Planning component:

@Component({
  selector: 'app-planning',
  templateUrl: './planning.component.html',
  styleUrls: ['./planning.component.css']
})
export class PlanningComponent implements OnInit {

   @Input() recipeData: [];

   constructor() {
   }

   ngOnInit(): void {
      console.log(this.recipeData); // Returns an empty array
   }

}

It seems you get the recipesList via API? If so it's empty when the component is initiated. — andsilver
– andsilver, Commented Feb 2, 2021 at 9:20
ngOnInit is called way before the HTML-template is being rendered and its content runs. You will most likely want to use ngOnChanges in order to check if the input value changed and react on it. — Philipp Meissner
– Philipp Meissner, Commented Feb 2, 2021 at 9:21

Timothy · Accepted Answer · 2021-02-02 09:24:27Z

1

This is because @Input change detection works only with immutable objects. There are many articles about it.

In short if you push into input array - it will not work, but if you update reference to an array - it will work.

<app-planning [recipeData]="recipesList"></app-planning>

// Component
recipesList.push(newItem) // View will not be updated

recipesList = [...recipesList, newItem]; // View will be updated

answered Feb 2, 2021 at 9:24

Timothy

3,5933 gold badges25 silver badges38 bronze badges

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

2 Comments

Philipp Meissner Over a year ago

I don't see how the reference to the structure would in any way produce the error OP describes. It's a lifecycle issue, not a reference issue.

Timothy Over a year ago

Robbert said that recipeData returns empty array but not undefined. So it means array is already constructed, and according to provided solution it is constructed in a parent component

Collectives™ on Stack Overflow

Pass array of objects to component not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related