A simple utility library for monitoring Angular change detection performance.
Add the package to your application:
npm install ngx-cdmon
Add CDMon as a provider, and register whichever TICK_REPORTERS you want to use.
import { CDMon, TickTimer, TICK_REPORTERS } from 'ngx-cdmon';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [
CDMon,
{ provide: TICK_REPORTERS, multi: true, useClass: TickTimer }
],
bootstrap: [AppComponent]
})
export class AppModule {}Inject the CDMon service afterwards to enable/disable it.
import { CDMon } from 'ngx-cdmon';
@Component({ /*... */ })
export class AppComponent {
constructor(cdmon: CDMon) {
cdmon.enable();
}
}Extend the TickReporter class, overriding its methods to hook into the change detection process. See the existing reporters for an example.