title: How to create table's td dynamically in angular?
body: <p>How to create "tr" and '/tr' tags dynamically in angular using *ngFor. I have used the following code but its creating the following attached screen short table and showing tr tags as string. But i want to append these  tags in html. In addresses array i have the data for td's. so that's why i am running *ngFor for td's. Here i have to work with table only because i am working with print functionality using angular. I can create something like this using div's and bootstrap classes but my requirement is table only. I have to create tr on the basis of td's and in one tr i have to show 3 tds.</p>
  
  <p><strong>For example i have 9 records in printAddresses then i want to print 3 rows and each row have 3 td's. If printAddresses  have 14 records then i want to print 5 rows and in the first 4 rows there will be records in all three td's and in 5th tr there will records in it's first 2 td's.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/HnYv3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HnYv3.png" alt="enter image description here"></a> </p>
  
  <p>in .ts file </p>
  
  <pre><code>tableRowStart = '&lt;tr&gt;';
  tableRowEnd = '&lt;/tr&gt;';
  </code></pre>
  
  <p>In .html file:</p>
  
  <pre><code> &lt;table class="row mb-5" style="width: 100%;"&gt;
      &lt;tbody style="width: 100%;"&gt;
        &lt;ng-container *ngFor="let address of printAddresses; let i = index"&gt;
          &lt;ng-container *ngIf="i%3===0"&gt;
            {{ tableRowStart }}
          &lt;/ng-container&gt;
          &lt;td style="width: 30%"&gt;
            &lt;div style="padding-bottom: 2%"&gt;
              {{ address.firstName }} {{ address.lastName }}
            &lt;/div&gt;
            &lt;div style="padding-bottom: 2%"&gt;
              {{ address.careOfAddress }} - {{ address.street}}
            &lt;/div&gt;
            &lt;div style="padding-bottom: 2%"&gt;
              {{ address.city }}
            &lt;/div&gt;
            &lt;div style="padding-bottom: 2%"&gt;
              {{ address.postalcode }} {{ address.state }}
            &lt;/div&gt;
          &lt;/td&gt;
          &lt;ng-container *ngIf="i%3===2 || i===printAddresses.length-1"&gt;
            {{ tableRowEnd }}
          &lt;/ng-container&gt;
        &lt;/ng-container&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>