What is more efficient in Angular, transferring data into a child component with one @Input() decorator or more @Input() decorators?

I have two solutions: send all the data as one object into a child component or send it separately.

for example :

<child-component [data]="{ ...product, ...reviews }">

or

<child-component [product]="product data" [reviews]="reviews data" ...so on>.

My question is about rendering speed. Which approach is more efficient for Angular rendering?

CodePudding user response：

generally it doesn't matter much how you pass your properties. However if you are using OnPush change detection strategy for child and this way of passing properties:

<child-component [data]="{somethin1, something2, ...soemthing3}">

then you are creating a new object with properties on every change detection in the parent - change detection would 100% visit child if it is hapenning in the parent, even if child's props didn't change (bc new object is created and passed via input)

CodePudding user response：

Transferening data via single @Input() decorator is more efficient for Angular rendering