CODEWITHSUNDEEP
angularangular2-template
Christophe Gigax
Christophe Gigax

Reputation: 3470

Detect when Angular has finished changing the template

Assume I have this template for my component :

    <table class="table table-striped table-bordered table-hover" #genericTable>
        <thead>
            <tr>
                <th *ngFor="#column of columns | slice:0:7">{{column.Label}}</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="#row of rows">
                <td *ngFor="#data of row.Datas | slice:0:7">
                    <div *ngIf="!data.Value">Aucun</div>
                    <div *ngIf="data.Value">{{data.Value}}</div>
                </td>
                <td><a [routerLink]="['Details', {table: tableName, id: row.Id}]">Details</a></td>
            </tr>
        </tbody>
    </table>

The goal of this template is to render a table following some informations coming from a Web service. Thanks to Angular, I can pull datas asynchronously and, with change detection, render my array of "columns" and "rows". It works like a charm.

Now I need to execute some code just after Angular has changed my template and has rendered my datas. How is that possible ? Thanks

Upvotes: 1

Views: 903

Answers (1)

Kentonbmax
Kentonbmax

Reputation: 958

If you are needing to interact with specific elements in the page after it is rendered or just after the data is calculated? If its after data you can use ng-init or ng-class. ng-class may work on render. Write a function in scope and pass it in. I have a metric processor that runs on ng-class and updates labels, green for good red for bad. 

 actionFunction: function(){
 //interact with page here
 angular.element(document).find(...); 
 };

In directive

ng-init="actionFunction()"

or

ng-class="actionFuncton()"

Upvotes: -1

Related Questions