page.html
<app-parcel-delivery-cost-promo [parcelDeliveryCost]="parcelDeliveryCost">
</app-parcel-delivery-cost-promo>
page.ts
changeDetection: ChangeDetectionStrategy.OnPush,
parcelDeliveryCost: Partial<ParcelDeliveryCostModel>;
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
<ion-grid>
<ion-row>
<ion-col size="12" >
<h5 class="font-bold margin-top-bottom-5">{{parcelDeliveryCost?.title}}</h5>
</ion-col>
<ion-col size="12">
<div class="color-medium">{{parcelDeliveryCost?.description}}</div>
</ion-col>
<ion-col size="12">
<h4 class="margin-top-bottom-5 text-line-through">{{parcelDeliveryCost?.cost}}</h4>
</ion-col>
</ion-row>
</ion-grid>
Q: Can you explain the behavior of @Input not working with OnPush change detection in this code? What could be causing the issue, such as the app-parcel-delivery-cost-promo component not displaying until a page modification is made?