@Input does not work with OnPush change detection

Question

page.html

page.ts

changeDetection: ChangeDetectionStrategy.OnPush,

parcelDeliveryCost: Partial;

  ngOnInit(): void {
     this.translateService.get(['Client.Parcel-Delivery-Cost']).subscribe(res => {

      this.parcelDeliveryCost = {
        title: res['Client.Parcel-Delivery-Cost'],
        description: res['Client.Parcel-Picked-Up-From-The-Location-And-Delivered-To-You'],
        cost: environment.parcelDeliveryCost
      };
    });
  }

component.ts

 changeDetection: ChangeDetectionStrategy.OnPush,

export class ParcelDeliveryCostPromoComponent implements OnInit {

  @Input() parcelDeliveryCost: ParcelDeliveryCostModel;

  constructor() { }

  ngOnInit(): void { }

}

componet.html


  
    
      {{parcelDeliveryCost?.title}}
    
    
      {{parcelDeliveryCost?.description}}
    
    
      {{parcelDeliveryCost?.cost}}

Q: Could you tell me why @Input does not work with OnPush change detection? Where is the issue of this code? i.e. I can't see the app-parcel-delivery-cost-promo component. But if I'll change something on the page then it shows.

user_8531463 · Answer

Input works fine. Subscription in ngOnInit with OnPush doesn't run change detection. You need to do one of following:

run change detector manually in subscription
use async pipe instead of .subscribe() (async pipe runs markForCheck)
turn off OnPush strategy

user_8110123 · Answer

Try this

 this.parcelDeliveryCost = Object.assign({},{
        title: res['Client.Parcel-Delivery-Cost'],
        description: res['Client.Parcel-Picked-Up-From-The-Location-And-Delivered-To-You'],
        cost: environment.parcelDeliveryCost
      });

As if the reference of a object is updated angular will run change detection.

@Input does not work with OnPush change detection

2 Answers