Question 1 / 1
A PriceTagComponent uses ChangeDetectionStrategy.OnPush and receives a product object via @Input(). The parent calls product.price = 199 and expects the displayed price to update. It doesn't. Then the parent calls this.product = { ...this.product, price: 199 } and the price updates immediately. Why does the second approach work but the first doesn't?
typescript
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: <span>{{ product.price | currency }}</span>
})
export class PriceTagComponent {
@Input() product: Product;
}