Angular8+ ngswitch nested component doesn't update the view

Question

I have the strange issue with component view rendering. Part of the component i work on looks like this:

<div [ngSwitch]="step">
  <comp1 *ngSwitchCase="'step1'"></comp1>

  <comp2 *ngSwitchCase="'step2'"></comp2>
</div>

Comp2 uses some shared component like this:

<ul>
  <li *ngFor="let p of products">
    {{p}}
    <change-quantity [quantity]="p.quantity" 
                     (quantityChanged)="onChangeQuantity(p,$event)">
    </change-quantity>
  </li>
</ul>

The problem i have is that <change-quantity> doesn't render the model changes if i init parent component with step = 'step2', but if i start from step='step1' and then go to step='step2' it works well. Changing quantity looks like this:

onChangeQuantity(product, ev) {
  product.quantity = ev;
}

I have found a workaround to use ngZone when changing product quantity model, but i think this is not the right way to do this. I'll be happy to find better way than triggering ngZone manually.

UPD: I tried to

1. replace *ngSwitch with few *ngIfs - no success
2. tried to force change detection by recreating array like this(no success either):

  onChangeQuantity(product, ev) {
    let result = [];
    this.products.forEach((prod) => {
      if(prod.id === product.id) {
        prod.quantity = ev;
      }
      let p = JSON.parse(
        JSON.stringify({
          id: prod.id,
          default_addon: prod.default_addon,
          quantity: prod.id === product.id ? ev : prod.quantity
        })
      );
      result.push(p);
    });
    this.products = result;
  }

Answer 1

I bet products array is updated without updating the reference. Here it is explained with possible solutions.