Event when element has been loaded into the DOM

Question

Using Angular, I have created a table that displays data. The data comes from a CSV that is parsed with the Papa Parse library. My data is almost immediately available in the console but takes about 10 seconds to be displayed in the table. Here is the code for the table:

<div class="table-responsive" *ngIf="searchData?.length" style="padding-bottom: 10px;">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th *ngFor="let header of headers">{{header}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let record of searchData; let i = index">
        <ng-container *ngIf="((i && !searchOn) || searchOn) && record.length > 1">
          <td *ngFor="let index of indexes; let x = index">
            <a *ngIf="x == 3" href="{{record[index]}}" target="_blank">{{record[index]}}</a>
            <ng-container *ngIf="x != 3">{{record[index]}}</ng-container>
          </td>
        </ng-container>
      </tr>
    </tbody>
  </table>
</div>

I am wanting to display a loading spinner while the table loads in but will need to listen for when the data has loaded into the DOM. How can I do this?

Answer 1

You already have *ngIf="searchData?.length" so this will work for when data has been loaded. Now, you only need to show spinner when data is loading... Just add another if condition with if it is not :

<div *ngIf="!searchData?.length">Loading...</div>