Exposes Angular class members to the global namespace.

expose-angular-class-members.ts

  /**
   * Expose Angular Methods
   * @desc Exposes
   * @private
   * @param {string} namespace - Namespace to append to window.ng (ex: ng.WidgetComponent)
   * @param {...string[]} member
   * @example
   *  ////////////////
   *  // Usage Example
   *  ////////////////
   *  // Inside ngOnInit or constructor
   *  this.expose('WidgetComponent', 'someProp', 'anotherProp', 'someMethod', 'anotherMethod');
   *
   *  // Access Outside Angular
   *  ng.WidgetComponent.method1('hello', 'world'); // Angular Method
   *  ng.WidgetComponent.prop2; // Angular Prop
   */
  private expose(...members: string[]): void {
    const namespace = this.constructor.name;
    const exposeMethod = (member: string) => {
      return (...args) => {
        this.ngZone.run(() => {
          if (typeof (this as any)[member] === 'function') {
            return this[member](...args);
          } else {
            return;
          }
        });
      };
    };

    this.ngZone.runOutsideAngular(() => {
      window.ng = (window.ng || {});
      window.ng[namespace] = {};
      // window.ng.getChartOptions = this.expose('getChartOptions');
      for (const member of members) {
        if (typeof (this as any)[member] === 'function') {
          window.ng[namespace][member] = exposeMethod(member).bind(this);
        } else if (this.hasOwnProperty(member)) {
          window.ng[namespace][member] = this[member];
        }
      }
    });
  }