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

Posted on by

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

  1. Is it wrong to manipulate objects passed as Input
  2. 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);
  }

}

Source: Angular Questions