Developer function list

developer-functions-component.ts

@Component({
  template: `
<div *ngFor="let component of components">
  <h4>{{ component.name }}</h4>
  <button
    *ngFor="let devFun of component.developerFunctions"
    (click)="callMethod(component.componentInstance, devFun)">
    {{ devFun.name }}
  </button>
</div>
`,
  selector: 'developer-function-list',
})
export class DeveloperFunctionList {
  components = this.probeForComponents();

  public callMethod(componentInstance: any, devFun: any) {
    componentInstance[devFun.name]();
  }

  probeForComponents() {
    const components = getComponents(); // Recurse through dom for components using ng.probe - ommitted for berevity
    return components
      .filter(comp => !!comp.componentInstance)
      .map(component => {
        const developerFunctions = Reflect.getMetadata(comp.componentInstance.constructor, 'DEVELOPER_FUNCTIONS`);
        return {
          component,
          developerFunctions 
        };
      })
  }
}