Angular Form Builder

component.ts

export default class MyComponent {
  this.builderForm = {components: []};
  this.builderReady = false;
  this.builderOptions = {
    builder: {
      resource: {}
    }
  };
  
  constructor() {
    var formio = (new Formio('https://humanresources.form.io'));
    formio.loadForms({
      params: {
        type: 'resource',
        select: '_id,title,name,components',
        limit: 100
      }
    }).then(function(resources) {
      var resourceGroup = {
        title: 'Existing Resource Fields',
        key: 'resource',
        weight: 50,
        groups: {}
      };
      resources.forEach(function(resource) {
        resourceGroup.groups[resource.name] = {
          title: resource.title,
          key: resource.name,
          components: {}
        };
        var groupInfo = resourceGroup.groups[resource.name];
        FormioUtils.eachComponent(resource.components, function(component) {
          groupInfo.components[component.key] = {
            title: component.label || component.title || component.legend || component.key,
            key: resource.name + '_' + component.key,
            schema: component
          };
       });
      });
    this.builderOptions.builder.resource = resourceGroup;
    this.builderReady = true;
  }
}

template.html

<formio-builder *ngIf="builderReady" [form]="builderForm" [options]="builderOptions"></formio-builder>