How to detect if a component finished re-rendering in Angular, right after the data came back from the server

Question

The title may not be clear enough so I'll try and further clarify the issue I am trying to solve.

Lets say I have a component which calls an API and uses the returned data to populate a table, I'll add some dummy code bellow to exemplify:

So my app.component.ts file would look something like this:

import { Component } from '@angular/core';
import { IEmployee } from '../employee/employee';
import { EmployeeService } from '../app/app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{

  employees: IEmployee[];

  constructor(private _employeeService: EmployeeService){}


ngOnInit(){
  this._employeeService.getEmployees().subscribe(employeeData => {
    this.employees = employeeData;
});
}
}

Then my app.component.html would look something like this:

  <div *ngFor="let employee of employees">
    <tr>
      <td>{{ employee.code | uppercase}}</td>
      <td>{{ employee.name }}</td>
      <td>{{ employee.gender }}</td>
      <td>{{ employee.annualSalary}}</td>
      <td>{{ employee.dateOfBirth}}</td>
    </tr>
  </div>

And the service file looks something like this, though I am not sure if it helps:

@Injectable()
export class EmployeeService {

  constructor(private http: HttpClient) { }

  getEmployees(): Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>("http://localhost:56879/api/employee");
  }
}

Now the problem I am trying to solve is a performance measuring thing. I need to be able to measure the time that has elapsed since the data has arrived and the html has been rendered, meaning that my table finished rendering with with the data I've passed in.

The problem I am facing is that I don't know how to detect when a component finished rendering the view.

I read about life cycle hooks but none of those seem to fit in my situation, AfterViewInit() is called once when the component is initialized and that's it, if there is any change occurring afterwards it's not triggered anymore. AfterViewChecked() is called several times, however I need to extract only one timestamp, once the markup finished rendering get the time.

I've also read a bit about RxJs which has the rx-dom library but I couldn't manage to integrate it in my project.

Also saw something related to benchmark.js however if I understood correctly that's for testing purposes

I've also read the existing questions on Stack Overflow which were somewhat similar to my case however the context differs:

How to call function after dom renders in Angular2

How to run a jquery function in Angular 2 after every component finish loading

How to determine all the angular 2 components have been rendered?

I would need this so that I can measure performance real time namely, whenever there is a change on the page I want to capture that render time and calculate the time elapsed since the data came back from the server and the view rendered.

Also only components that are affected is of interest to me not the whole application. Since we'll have data traveling real time this won't cause the whole application to reload every time just the components that are affected.

Any tips or guidance would be of great help, I kinda ran out of ideeas.