Design question: should calculation done in frontend be stored in backend?

I'm making a dish price calculator web app with MEAN.

On the component DishDetail I calculate the price of the dish based on added ingredients (I call them dish components).

The HTML:

<p class="card-text"><b>Total cost:</b> </p>

which is calculated with the following function:

  getDishTotalCost(): void {
    this.totalCost = 0;
    this.dishComponents.forEach((component, index) => {
      this.totalCost += component.price * this.dish!.components[index].componentQuantity;
    });
  }

It is first calculated in ngOnInit() and also updated for each change of component quantity:

  onQuantityChange(_newValue: any) {
    this.getDishTotalCost();
    this.validateQuantityInput();
  }

which is called like this from the HTML:

(ngModelChange)="onQuantityChange($event)"

My question is: Should I store the value of totalCost in the database? Or is it "enough" to calculate only in the frontend? What is best practice? What are pros and cons by keeping it front-end only/add to database? Could there be any later implications for this decision? Looking for guidance, thank you!