Angular Lifecycle Debugging Logger
Decorator to quickly add logging for Angular lifecycle hooks in your components
Minimal markup - no more adding console logs to see what your components are doing!
Installation
npm install --save-dev ng-lifecycle-debug
Usage
; // -- Console Output --// ngOnChanges called for SheepStackerComponent// initialStack changed from undefined to 1// ngOnInit called for SheepStackerComponent// ngAfterViewInit called for SheepStackerComponent // -- Console Output --// ngOnInit called for SheepStackerComponent // -- Console Output --// ngOnInit called for SheepStackerComponent// ngAfterViewInit called for SheepStackerComponent // -- Console Output --// Awesome ngOnChanges happened in SheepStackerComponent// Awesome ngOnInit happened in SheepStackerComponent// Awesome ngAfterViewInit happened in SheepStackerComponent // -- Console Output --// Awesome ngOnInit happened in SheepStackerComponent// Awesome ngAfterViewInit happened in SheepStackerComponent // -- Console Output --// Something happened// ngAfterViewInit called for SheepStackerComponent
Options
Defaults
Default options are to log the ngOnInit
, ngOnChanges
, ngAfterViewInit
, and ngOnDestroy
lifecycle hooks using
a simple console.log
, with a more advanced version using console.group
for ngOnChanges
.
Simple Options
The decorator accepts simplified options for quicker and more limited use:
Option | Description |
---|---|
string |
log a specific lifecycle hook |
string[] |
log a specific subset of lifecycle hooks |
function |
a function to use for all logging |
Note that the default function map (that has a different output for ngOnChanges
) is still used if a function is
given as a single argument. To override this, use the advanced options with logFunc
and pass an empty object as the logFuncMap
.
Advanced Options
Options are passed as an object with one or more of the following keys:
Option | Description |
---|---|
hooks: string[] |
array of Angular lifecycle hooks to respond to |
logFunc: Function |
specify a custom function for each hook |
logFuncMap: Object |
specify different functions for different lifecycle hooks, where the object key is the hook and the value is the function |
useMap: boolean |
whether or not to use the function map |
Note: the default function map (that has a different output for ngOnChanges
) is still used if a function is given as
a single argument. For overriding it when
Option Types and Interfaces
Type / Interface | Description |
---|---|
DebugLifeCycleHook |
String values for Angular lifecycle hooks |
DebugLogFunction |
Function required for logging (hook, class, ...args) |
DebugLogFunctionMap |
Object for lifecycle hook to function map |
DebugLifeCycleOptionObject |
Overall configuration object |
To Do
- Add optional logging of component properties
- Add capability for enter / exit logging