How can I dynamically update the summary section with the item name and price every time I click on add without removing the previous entries?
booking.component.html
<table class="container table table-striped table-hover">
<thead>
<tr>
<th scope="col">Activity</th>
<th scope="col">Name</th>
<th scope="col">1 hour</th>
<th scope="col">30 min.</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of bookAdd">
<td>img</td>
<td>{{ item.name }}</td>
<td *ngFor="let pointer of item.price; index as i">
{{ pointer }}
<button
type="button"
class="btn btn-dark btn-sm"
(click)="addTotalPrice(pointer); addName(item.name); addPrice(pointer)"
>
Add
</button>
</td>
</tr>
</tbody>
</table>
<div class="container">
<div class="row">
<div class="col-3 card">
<h3 class="center">summary</h3>
<p>
{{name}} {{price}}
</p>
<h4>total {{ total }}</h4>
</div>
</div>
</div>
booking.component.ts
bookAdd: Booking[] = [];
total = 0;
name: any;
price: any;
ngOnInit(): void {
this.booking.getBooking().subscribe((data) => {
this.bookAdd = data;
console.log(this.bookAdd);
});
}
addTotalPrice(price: number ,) {
this.total += price;
}
addName(name:any ) {
this.name = name;
}
addPrice (price: number) {
this.price = price;
}
https://drive.google.com/file/d/1lIjWCVvz-iSm9MlHxWXLOA2c_Hka6SrB/view?usp=sharing