Angular debug pipe to debug values in templates

debug.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Debug pipe to debug template statements.
 * It will always return the value it gets passed, so we can pipe it along with other pipes.
 *
 * @example
 * ```
  <!-- only log to console -->
  <compA [binding]= "someObj | smtDebug"></compA>

  <!-- log to console and trigger breakpoint -->
  <compB [binding]= "someObj | smtDebug:true"></compB>

  <!-- also works with async pipe -->
  <compC [binding]= "(someObs$ | async) | smtDebug:true"></compC>

  <!-- skip null or undefined emits -->
  <compD [binding]= "(someObs$ | async) | smtDebug:true:true"></compD>

  <!-- is pipeable with other pipes -->
  <compE [binding]= "(someObs$ | async) | smtDebug:true | json"></compE>
 * ```
 */
@Pipe({
  name: 'appDebug'
})
export class DebugPipe implements PipeTransform {

  // tslint:disable-next-line:no-any
  transform(value: any, isDebugger = false, skipNullOrUndefined = false) {
    if (skipNullOrUndefined && (value === null || value === undefined)) {
      return value;
    }

    console.dir(value);

    if (isDebugger) {
      // tslint:disable-next-line:no-debugger
      debugger;
    }
    return value;
  }

}