Angular não está atualizando variavel na view | Angular

Tenho um component que chama outro e utiliza um metodo para atualizar uma variavel, mas a variavel é atualizada no component mas não na view.

Componete que aciona o outro:

export class ProductsComponent implements OnInit {

  public listProduct: Product[];

  products: Product[] = [];
  quantity: number[] = [];

  values: number = 0;

  constructor(
    private service: ProductService,    
    private headerComponent: HeaderComponent
    )
  {}

  ngOnInit(){
    this.service.getProducts().subscribe(
      (listProduct: Product[]) =>{
      this.listProduct = listProduct;

      for(let i =0; i < listProduct.length; i++){
        listProduct[i].quantity = 0;
      }
    },
      (error) => console.error(error)
    );
  }

  incrementValue(product:Product){
    product.quantity += 1;
  }

  minusValue(product:Product){
    if(product.quantity == 0) return;
    product.quantity -= 1;
  }

  buildCarShopping(){

  }

  ckeckValues(product:Product){
    this.headerComponent.getTotalCart(product.quantity);
  }

}

Component que recebe a chamada:

export class HeaderComponent implements OnInit{

  totalitems: any = 0;

  constructor(
    private changeDetectorRef: ChangeDetectorRef){}

  ngOnInit() {
    this.totalitems = 0;
  }

  public getTotalCart(quantity:number){
    this.totalitems +=quantity;
    console.log(this.totalitems)
  }


}

view do component Header:

<div class="box-header d-flex justify-content-around align-items-center">
  <div class="box-title-app">
    <p class="title-app">StocksMarket</p>
  </div>



  <div class="assets-header d-flex justify-content-around align-items-center">
    <p>Home</p>
    <p>Products</p>
    <div class="box-cart-icon position-relative">
      <i class="bi bi-cart"></i>
      <p class="position-absolute cart-cont">{{ totalitems }}</p>
    </div>
    <i class="bi bi-person"></i>
  </div>

</div>

Olá! O problema é que a variável totalitems é atualizada corretamente no componente HeaderComponent, mas não é refletida na view. Isso pode acontecer porque o Angular não detecta as mudanças em variáveis que não são observáveis. Para resolver isso, podemos usar o ChangeDetectorRef para forçar o Angular a atualizar a view após a mudança na variável totalitems. Para fazer isso, siga os seguintes passos:

Importe o ChangeDetectorRef no componente HeaderComponent:

import { ChangeDetectorRef } from '@angular/core';

Injete o ChangeDetectorRef no construtor do componente:

constructor(private changeDetectorRef: ChangeDetectorRef) {}

Chame o método detectChanges() do ChangeDetectorRef após atualizar a variável totalitems:

public getTotalCart(quantity:number){
  this.totalitems +=quantity;
  console.log(this.totalitems);
  this.changeDetectorRef.detectChanges();
}

Dessa forma, o Angular irá detectar a mudança na variável totalitems e atualizar a view. Espero ter ajudado!

Mergulhe em programação