title: How to display array as a list in a table Angular
body: <p>I have a list that contains 1 element which looks like this</p>
  <p><a href="https://i.stack.imgur.com/CbmVU.png" rel="nofollow noreferrer">picture of array and contents</a></p>
  <p>I want to display the data in a table with the headers being Author Name and Title. But the code I have shows all the titles on one row instead of creating more rows for each Title and Author Name. How can I achieve this?</p>
  <p><a href="https://i.stack.imgur.com/9FxZu.png" rel="nofollow noreferrer">Table I have with the following code</a></p>
  <pre><code>&lt;table class='table table-striped' aria-labelledby=&quot;tableLabel&quot; *ngIf=&quot;authorWithBooks&quot;&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Author Name&lt;/th&gt;
        &lt;th&gt;Title&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor=&quot;let authorWithBook of authorWithBooks&quot;&gt;
        &lt;td&gt;{{ authorWithBook.authorName }}&lt;/td&gt;
        &lt;td&gt;{{ authorWithBook.bookNameList }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>