title: I want update in summary section, item name and price when click on add (angular)
body: <p>I want to update the summary section with the item name,
  and item price, I do that but each time I click on add, remove the old one and updated with the new</p>
  <p>booking.component.html</p>
  <pre><code>&lt;table class=&quot;container table table-striped table-hover&quot;&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th scope=&quot;col&quot;&gt;Activity&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;1 hour&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;30 min.&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor=&quot;let item of bookAdd&quot;&gt;
          &lt;td&gt;img&lt;/td&gt;
          &lt;td&gt;{{ item.name }}&lt;/td&gt;
          &lt;td *ngFor=&quot;let pointer of item.price; index as i&quot;&gt;
            {{ pointer }}
            &lt;button
              type=&quot;button&quot;
              class=&quot;btn btn-dark btn-sm&quot;
              (click)=&quot;addTotalPrice(pointer)&quot;
              (click)=&quot;addName(item.name)&quot;
              (click)=&quot;addPrice(pointer)&quot;
            &gt;
              Add
            &lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-3 card&quot;&gt;
          &lt;h3 class=&quot;center&quot;&gt;summary&lt;/h3&gt;
          &lt;p&gt;
           {{name}} {{price}} 
          &lt;/p&gt;
          &lt;h4&gt;total {{ total }}&lt;/h4&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>booking.component.ts</p>
  <pre><code>   bookAdd: Booking[] = [];
     total = 0;
      name:  any;
      price: any;
   
    ngOnInit(): void {
  
      this.booking.getBooking().subscribe((data) =&gt; {
        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;
    }
  </code></pre>
  <p><a href="https://drive.google.com/file/d/1lIjWCVvz-iSm9MlHxWXLOA2c_Hka6SrB/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1lIjWCVvz-iSm9MlHxWXLOA2c_Hka6SrB/view?usp=sharing</a></p>