Angular Performance Monitoring with Custom Typescript Decorators

This post follows on from the last post on Angular Performance monitoring. The code is updated to use some custom Typescript decorators to add marks and measures to the component.

Below is the mark decorator. Simply takes the mark name and creates the mark.

export function PerformanceMark( name: string = '' ) {
  return function( target, key, descriptor ) {
    console.log('mark', name);
    performance.mark(name);
  }
}

Below is the measure decorator. It takes a measure name, the start mark and the end mark.

export function PerformanceMeasure( name: string, mark1: string = '', mark2: string = '' ) {
  return function( target, key, descriptor ) {
    console.log('measure', name, mark1, mark2);
    performance.measure(name, mark1, mark2);
  }
}

A mark can then be added to any function as below.

@PerformanceMark('onInit')
ngOnInit() {
  console.log('ngOnInit()');
}
  
@PerformanceMark('afterViewInit')
ngAfterViewInit() {
  console.log('ngAfterViewInit()');
}

then the last piece is the measure.

@PerformanceMeasure('onInitToAfterViewInit', 'onInit','afterViewInit')
perfMeasure() {
  console.log('perfMeasure() called')
} 

Below shows these measures in the performance tab

If you want to run this code check it out the repo here