在Angular2中注入大量HTML期间的微调

Question

In my Angular application I have a switch that causes injecting large html data into the page. It takes about 1-2 seconds to inject and I wonder if it is posssible to implement a spinner, to let know to user that a view is rendering.

I saw few implementations based on typescript code but none fits to my case. I'd like to do it only in view - if possible.

<table (click)="switch.active=!switch.active">
<tr *ngFor="condition"></tr> //here I have about 500 rows
</table>

Answer 1

You can use ng-show or ng-hide to get the desire effect. Set the condition to true based on when the loading of your data is done through js part. I don't know how you are fetching the data but you can put a condition there to see when it is done then update the ng-show condition, till data id loading show a spinner.

You can also try to put loader for each row so for user can see the data even it is not fully loaded.

    <table (click)="switch.active=!switch.active">
    <div class="spinner" ng-show="true condition till data is loading">
    </div>
    <tr *ngFor="condition" ng-show="(negate false) condition when loading complete"></tr>
    </table>