Angular | Development Only Directive

development-only.directive.ts

/**
 * @author Muhammad FAISAL
 * @description Controls the display of html contents only during development mode.
 * @example <button development-only>Some Button</button>
 */

// Angular Imports
import { Directive, OnInit, ElementRef, isDevMode } from '@angular/core';

// Define class for the Directive
@Directive({
  selector: '[development-only]'
})
export class DevelopmentOnlyDirective implements OnInit {
  /**
   * Initializes an instance of DevelopmentOnlyDirective class.
   * @param _elementRef Reference to the element where this directive is applied.
   */
  constructor(private readonly _elementRef: ElementRef) { }

  /**
   * Invoked when component initializes.
   */
  ngOnInit() {
    const isDevelopment = isDevMode();
    if (!isDevelopment && this._elementRef.nativeElement.parentNode !== null) {
      this._elementRef.nativeElement.outerHTML = '';
    }
  }
}