title: Angular Datatable Responsive Extention not working with *ngFor directive
body: <p>I am working on jhipster 5.7.2 project with angular 7 and I am using angular datatables and it's responsive extension is working fine when I have static data,  but when I use *ngFor directive in  tag it doesn't collapse the column on resizing, just hides the column header but the column is still there.
  After I resize to small window size and size back to normal the orientation of the first table row gets distorted and doesn't get fixed until I reload the page.</p>
  
  <p>P.S - Struggled a lot on finding a fix, and tried giving width=100% to the table but the issue still persists.</p>
  
  <p><strong>user-management-component.html</strong></p>
  
  <pre><code>&lt;div&gt;
          &lt;table datatable [dtOptions]="dtOptions" class="row-border hover" width="100%"&gt;
              &lt;thead&gt;
                &lt;tr class="tr-bg"&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Login&lt;/th&gt;
                  &lt;!-- &lt;th&gt;Last name&lt;/th&gt; --&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr *ngFor="let user of users; trackBy: trackIdentity"&gt;
                  &lt;td&gt;&lt;span&gt;{{user.id}}&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span&gt;{{user.login}}&lt;/span&gt;&lt;/td&gt;
                  &lt;!-- &lt;td&gt;&lt;span&gt;Bar&lt;/span&gt;&lt;/td&gt; --&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Here is the ngOnInit() function where dtOptions are declared.</p>
  
  <p><strong>user-management-component.ts</strong></p>
  
  <pre><code>ngOnInit() {
  
      this.dtOptions = {
          responsive: true
        };
  
      this.accountService.identity().then(account =&gt; {
          this.currentAccount = account;
          this.loadAll();
          this.registerChangeInUsers();
      });
  }
  </code></pre>
  
  <p><strong>Full size page table</strong>
  <a href="https://i.stack.imgur.com/QA05P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QA05P.png" alt="Full Size page table "></a></p>
  
  <p><strong>Table After resizing the window</strong>
  <a href="https://i.stack.imgur.com/3sBs4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3sBs4.png" alt="enter image description here"></a></p>
  
  <p>Thanks in advance for the help!</p>