Why can't we manipulate objects passed to component via @input() in angular

Question

I recently upgraded my app from angular 7 to angular 11. Everything was working fine and then I implemented angular universal to enable server side rendering.

After implementing server side rendering i got lots of error saying "Can't change readonly 'xyz' member of object [Object Object]"

All these members are from object that i have paaased to child component from parent component via @input()

My Questions

Is it wrong to manipulate objects passed as Input
Why is it breaking for Angular universal (server side rendering) and not for client side rendering

Here's one such component

export class BannerComponent {

  @Input() banners : Offer[]
  constructor(private analyticService : AnalyticService) { }

  ngOnChanges() {
    if(this.banners) {
      this.banners.forEach(banner => {
        if(!banner.bannerImage.startsWith("http"))
          banner.bannerImage = environment.imageHost + banner.bannerImage;
      })
    }    
  }

  recordEvent(banner : Offer) {
    this.analyticService.eventEmitter(banner.category.name, "Click on banner", banner.offerDetail + "-" + banner.merchant.name, AnalyticService.AVG_AFFILIATE_CLICK_VALUE);
  }

}

Here's my offer class

import { Store } from "./store";
import { Category } from "./category";

export class Offer {
    
    id: number;
   
    merchant: Store;
   
    offerDetail: string;
   
    link: string;
   
    openExternal: boolean;
   
    logoPath: string;
   
    lastDate: Date;
   
    banner: boolean;
   
    bannerImage: string;

    category : Category;
    offerDescription?: string;
}

Store and Category are another two models

Is the banners attribute in the template provided by an Observable? — Will Alexander
– Will Alexander, Commented Feb 8, 2021 at 16:45

Oliver · Accepted Answer · 2021-02-08 19:25:46Z

4

+50

Regarding question 1:

The short answer is yes, you should avoid manipulating data from the parent component in child components.

This is because in Angular, data flows from parent to child components, and that data flows unidirectionally, which is somewhat hinted at in the angular docs.

In your case, you are modifying the parent component's data.

Consider this example:

@Component({
   template: `<app-banner-component [banners]="parentBanners"></app-banner-component>`
})
class ParentComponent {
    parentBanners: Offer[] = {...};
}

After ngOnChanges was called, the parentBanners values will also have their bannerImage changed. This is because the array is not copied, but rather passed in by reference, so any changes made to the array in the child component will also apply to the parent component.

Because change detection runs from parent components to child components, this may lead to the dreaded ExpressionChangedAfterItHasBeenChecked error, as explained in this video.

To work around this, make a copy of your array, for example, like this:

@Input() set banners (values: Offer[]) {
    this._banners = values.map(offer => ({...offer}));
}
get banners(): Offer[] {
    return this._banners;
}

private _banners : Offer[];

Regarding 2, I have no experience with Angular Universal. My speculation would be that it enforces data flow much more strictly, and refactoring might resolve the issue.

answered Feb 8, 2021 at 19:25

Oliver

1365 bronze badges

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

1 Comment

Kumar Gaurav Over a year ago

Haven't tried it, but found it much convincing

Collectives™ on Stack Overflow

Why can't we manipulate objects passed to component via @input() in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related