title: ERROR TypeError: Cannot read property 'name' of undefined when i try to add product
body: <p>I try to make a basket as simply as possible, I try to add a product to my basket but I have an error but I cannot find my error.</p>
  <p>thank you</p>
  <p><strong>html</strong></p>
  <pre><code>        &lt;h2&gt;Product&lt;/h2&gt;
          &lt;div class=&quot;card&quot; *ngFor=&quot;let product of productList&quot;&gt;
              &lt;h1&gt;{{product.name}}&lt;/h1&gt;
              &lt;p class=&quot;price&quot;&gt;{{product.price | currency: 'USD'}}&lt;/p&gt;
              &lt;p&gt;&lt;button (click)=add()&gt;Add to Cart&lt;/button&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h2&gt;Total&lt;/h2&gt;
          &lt;div class=&quot;card&quot;&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;product&lt;/th&gt;
                          &lt;th&gt;price&lt;/th&gt;
                          &lt;th&gt;Quantity&lt;/th&gt;
                          &lt;th&gt;total&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody *ngFor=&quot;let added of productArray&quot;&gt;
                      &lt;tr&gt;
                          &lt;td&gt;{{added.name}}&lt;/td&gt;
                          &lt;td&gt;{{added.price}}&lt;/td&gt;
                          &lt;td&gt;x 10&lt;/td&gt;
                          &lt;td&gt;45€&lt;/td&gt;
  </code></pre>
  <p><strong>ts.file</strong></p>
  <pre><code> productList = [
      { name: 'Louis Vuis', price: 10 },
      { name: 'shubert helmet', price: 20 },
      { name: 'sport gloves', price: 30 }
    ];
  
    productArray: any = [];
  
    add(product) {
      this.productArray.push(product);
    }
  </code></pre>