在角度8/9中创建动态零部件

Question

我已经为表格和表单创建了自己的指令，现在我可以在需要任何地方的Web应用程序中使用更少的代码来使用它们了。

//html
<smart-table [tableData]="tableData" [settings]="tableSettings" (editFormDataFromTable)="finallyArrived($event)">

</smart-table> 

以及表格

 <smart-form [fields]="getFields()" [settings]="formSettings" (formSubmit)="onFormSubmit($event)" (formSubmitWarn)="onFormSubmitWarn($event)" (formSubmitInfo)="onFormSubmitInfo($event)"></smart-form>

//ts file=>
this.tableSettings = {
      tableColumns: columns, // default will take from array
      tableTitle: 'User Information', // 'Dynamic Table'
      showInfoModal: true, // Default true
      showEditModal: true, // Default false
      infoTitle: 'User Description', // 'Dynamic Modal'
      infoButton: true,
      infoWarnButton: true,
      infoButtonName: 'Action1',
      infoWarnButtonName: 'Action2',
      pagignation: true, // Default true
      sorting: true, // Default true
      filter: true, // Default true
      excel: true, // Default true
      excelColumns: 'default', // Default 'default',
      editColumnsData: true,


    };

public fields: any[] = [
    {
      type: 'text',
      name: 'firstName',
      label: 'First Name',
      value: '',
      required: true,
    },
    {
      type: 'text',
      name: 'lastName',
      label: 'Last Name',
      value: '',
      required: true,
    },
    {
      type: 'email',
      name: 'email',
      label: 'Email',
      value: '',
      required: true,
      pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/
    },
    {
      type: 'mobile',
      name: 'mobile',
      label: 'Mobile',
      value: '',
      required: true,
      pattern: /^([+]\d{2})?\d{10}$/
    },

    {
      type: 'password',
      name: 'password',
      label: 'Password',
      value: '',
      required: true,
    },


    {
      type: 'dropdown',
      name: 'country',
      label: 'Country',
      value: 'in',
      required: true,
      options: [
        { key: 'in', label: 'India' },
        { key: 'us', label: 'USA' }
      ]
    },

  ];

所有这些都工作正常，但是想要一种方法来通过拖放动态添加组件或动态添加删除组件以更快地创建相似的网页吗？

<button>Add table</button> <button> Add Form </form> 

或者拖放将非常有用