CODEWITHSUNDEEP
javascriptangularngfor
Oğuz KURTCUOĞLU
Oğuz KURTCUOĞLU

Reputation: 143

Angular 4 NgFor Completed Event

when *ngFor completed I want to call my custom function. (I'm using jQuery datatables for table. when tr elements completed I want to run this function $('#myTable').dataTables(options);

MyCode:

<tbody>
<tr *ngFor="let company of companies; let last = last;">
    <td>{{company.shortTitle}}</td>
    <td>{{company.shortAddress}}</td>
    <td>{{company.taxOffice}}</td>
    <td>{{company.taxNumber}}</td>
    <td *ngIf="company.eInvoice"><span class="label label-primary">Evet</span></td>
    <td *ngIf="!company.eInvoice"><span class="label label-danger">Hayır</span></td>
    <td>
        <button class="btn btn-primary btn-xs"> <i class="fa fa-edit"></i></button>
        <button class="btn btn-danger btn-xs"> <i class="fa fa-trash"></i></button>
    </td>
</tr>

Upvotes: 0

Views: 2433

Answers (4)

Oğuz KURTCUOĞLU
Oğuz KURTCUOĞLU

Reputation: 143

I'm solved this problem with https://l-lin.github.io/angular-datatables/#/getting-started. Thank you for this link @codtext

Upvotes: 0

Sagar V
Sagar V

Reputation: 12478

You can achieve this with either ngAfterViewInit

Code inside ngAfterViewInit will be executed after the view has been initialized

Your code will look like

export class className{
 .....
   ngAfterViewInit(){
      //code
   }
 .....
}

Upvotes: 1

Max Koretskyi
Max Koretskyi

Reputation: 105547

Use ngAfterViewInit life-cycle hook for that. Since *ngFor is synchronous it will update DOM when companies changes and the added DOM nodes will be available in ngAfterViewInit lifecycle hook.

Upvotes: 1

Elias Soares
Elias Soares

Reputation: 10264

You should almost never mix Angular and jQuery. If you're doing, probably you will have problems or ugly code workarounds.

Angular handles the DOM to make everything work, the datatable (jQuery version) plugin too, so it's question of time to some conflict happen.

I suggest you the ngx-datatables, but I'm pretty sure that you can find a bunch of simillar components. Also there are some datatable wrapper for Angular 4.

Upvotes: 0

Related Questions