Imagine you're developing a cutting-edge pizza ordering application complete with a MenuComponent that showcases all the delicious menu items offered by the restaurant.
Each item is presented as a unique card displaying all the essential information. To enhance user experience, you've included the option to customize items with various toppings.
The challenge arises when you need to dynamically update the base price of an item upon selecting additional toppings.
Take a look at the structure of my menu.component.html:
<div fxFlex *ngFor="let category of categories">
<h3>{{category.name}}</h3>
<div *ngFor="let item of items">
<mat-card *ngIf="item.category == category.name" class="itemcard">
<mat-card-header>
<mat-card-title>{{item.name}}</mat-card-title>
<mat-card-subtitle>{{item.category}}</mat-card-subtitle>
<span class="flex-spacer"></span>
<div>$ {{item.price_large}}</div>
</mat-card-header>
<mat-card-content>
<mat-form-field>
<mat-label>Extra Toppings</mat-label>
<mat-select multiple>
<mat-option *ngFor="let topping of toppings" [value]="topping.rate">{{topping.name}}</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
<span class="flex-spacer"></span>
<button mat-button color="primary"><i class="fa fa-plus-circle"></i> Add to Cart</button>
</mat-card>
</div>
</div>
In the div section, I'm currently displaying the base price and aim to update it dynamically upon selecting extra toppings. I've considered using a two-way binding approach, but I'm looking for fresh ideas to move forward.
Additionally, I'm seeking guidance on how to ensure that the price changes only reflect on the specific item selected.