Как создать угловой материал динамически?

Question

У меня есть массив угловых элементов управления материалами и их свойствами.

У меня есть массив списка моей коллекции баз данных и его полей.

Также у меня есть таблица данных в определенном компоненте моего углового проекта, которая будет заполнена данными элементов массива коллекции.

вот несколько примеров кодов:

интерфейс поля сбора:

export interface ICollectionFields {
  columnTitle: string;
  Type: string;
  control: IControls;
  columnWidth: number;
}

интерфейс коллекции:

export interface ICollections {
  collectionName: string;
  collectionFields: ICollectionFields[];
  collectionFieldValidation: IControlValidation[];
  hasPaginator: boolean;
  stickyColumn: number;
  stickyHeader: boolean;
}

Интерфейс управления:

export interface IControls {
  controlName: controlsEnum;
  placeHolder?: string;  // input, SelectTrigger
  type?: 'color'|'date'|'datetime-local'|'email'|'month'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'|'week'; // input
  enabled?: boolean; // input
  matAutosize?: boolean; // input
  matAutosizeMaxRows?: number; // input
  matAutosizeMinRows?: number; // input
  matTextareaAutosize?: boolean; // textarea
  .
  .
}

мой интерфейс валидаторов (сейчас это не важно):

export interface IControlValidation {
  validatorTitle: string;
  validation_rols: string;
}

массивы определены так:

public collections: ICollections[] = [
  {
    collectionName: 'Brands',
    collectionFields: [
      {
        columnTitle : 'brandTitle',
        Type : dtEnum.string,
        control: {
          controlName: controlsEnum.input,
          placeHolder: 'Enter brand title',
          autocomplete: false,
        },
        columnWidth: 200
      }
    ],
    collectionFieldValidation: [{name: 'test'}],
    hasPaginator: true,
    stickyColumn: 0,
    stickyHeader: true
  }
];

Я намеревался добавить значок кнопки для редактирования каждой строки упомянутой таблицы данных. когда пользователь щелкнет по нему, появится диалоговое окно.

В этом диалоговом окне я хочу иметь подходящий элемент управления, связанный с типом данных каждого поля строки и указанный элемент управления в моем массиве материалов.

Теперь моя проблема в 2 вещах:

1- Как добавить элементы управления в раздел HTML диалогового окна?

2- Как динамически добавлять свойства для каждого элемента управления?

Я еще не разработал таблицу данных. но теоретически я хочу знать, как это возможно?

Большое спасибо.

Answer 1

Вот полное решение:

Создание динамической формы с настраиваемыми полями и проверками с использованием угловых 2 +

Answer 2

После того, как вы создали свои компоненты, вы должны добавить их в свой модуль в компонентах ввода.(Если у вас нет отдельных модулей) должен быть app.module.

entryComponents: [ HeroJobAdComponent, HeroProfileComponent ]

https://angular.io/guide/dynamic-component-loader

NgModule({
  declarations: [AppComponent, HeaderComponent, ErrorComponent],
  imports: [
   ....
  ],
  providers: [
   ....
  ],
  entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
  bootstrap: [AppComponent]
})
export class AppModule {}