angular-directive.ts

import { perfume } from 'src/app/perfume';
import { PerfumeAfterViewInit } from 'perfume.js/angular';

@Component({
  selector: 'ngfor-perfomance',
  template: `
   <ul>
    <li *ngFor="let d of data; let l = last; let f = first;">
      <span *ngIf="f">{{ngForCallback(true)}}</span>
      {{d.name}}
      <span *ngIf="l">{{ngForCallback(false)}}</span>
    </li>
  </ul>
  `
})
@PerfumeAfterViewInit('TestingComponent')
export class TestingComponent {
  public ngForCallback(value) {
    if (value) {
      perfume.getInstance().start('NgForFullLoop');
    } else if (!value) {
      const duration = <number>perfume.getInstance().end('NgForFullLoop');
      perfume.getInstance().log("NgForFullLoop took: ", duration);
    }
  }
}