title: How to output items from an array in angular
body: <p>Im really new to angular. And I find that it is really hard to get an item from an array and output in the relevant html file in that component.
  The below code shows the onClick function of the <strong><em>bill-item.component.ts</em></strong> file</p>
  
  <pre><code>arr: Array&lt;any&gt; =[];
  itemArray: Array&lt;any&gt; =[]; 
  
       onAddToBill(itemId:string, name:string , expireDate:string , quantity:string){
  
        this.itemArray.push([itemId,name,expireDate,quantity]);
        this.arr.push(this.itemArray);
        console.log(this.arr);
  
        }
  </code></pre>
  
  <p>And I need to output the item array on my <strong><em>bill-item.component.html</em></strong> which is shown below</p>
  
  <pre><code>                 &lt;tbody&gt;
  
                    &lt;tr *ngFor="let itemArrays of arr"&gt;
  
                      &lt;td *ngFor="let obj of itemArrays"&gt;{{obj[1]}}&lt;/td&gt;
                      &lt;td *ngFor="let obj of itemArrays"&gt;{{obj[0]}}&lt;/td&gt;
                      &lt;td&gt;&lt;input type="number" class="is-center" id="number" value="1" style="width: 50%;" /&gt;&lt;/td&gt;
                      &lt;td *ngFor="let obj of itemArrays"&gt;{{obj[2]}}&lt;/td&gt;
                      &lt;td *ngFor="let obj of itemArrays"&gt;{{obj[3]}}&lt;/td&gt;
  
                    &lt;/tr&gt;
  
                  &lt;/tbody&gt;
  </code></pre>
  
  <p>The below image shows the item list when I add the first item</p>
  
  <p><a href="https://i.stack.imgur.com/LoUt9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LoUt9.png" alt="after adding one item"></a></p>
  
  <p>But after adding the second item , the item list shows like this
  <a href="https://i.stack.imgur.com/D1YTG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D1YTG.png" alt="The name of the item should be in a separate row not in the same row as first item"></a></p>
  
  <p>Here all the items gets add up to the same row , I want to get each item in separate row , line after line.</p>
  
  <p>Then I tried the below code</p>
  
  <pre><code>           &lt;tbody&gt;
                &lt;tr *ngFor="let entries of arr"&gt;
                  &lt;td&gt;{{entries [1]}}&lt;/td&gt;
                  &lt;td&gt;{{entries [0]}}&lt;/td&gt;
                  &lt;td&gt;&lt;input type="number" class="is-center" id="number" value="1" style="width: 50%;" /&gt;&lt;/td&gt;
                  &lt;td&gt;{{entries [2]}}&lt;/td&gt;
                  &lt;td&gt;{{entries [3]}}&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/nOeWk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nOeWk.png" alt="enter image description here"></a></p>
  
  <p>And this was the result. As ID has the entry[0] it was filled with all the instances in that array.</p>
  
  <p>The below image shows my console.log(arr) result after adding 3 items
  <a href="https://i.stack.imgur.com/uj0sw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uj0sw.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/m4D0I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m4D0I.png" alt="enter image description here"></a></p>