Создание элемента div внутри n-го дочернего элемента в Angular 4

«Угловой способ» заключается в использовании привязки данных:

1. Создайте структуру вашей формы в качестве модели
2. Привяжите к вашей модели формы
3. Обновить модель при отбрасывании

В вашем вопросе недостаточно информации для создания полного примера, но следующее должно показать концепцию:

Раздел

export interface Section {
  name: string;
  questions: Question[];
}

FormContainerComponent

export class FormContainerComponent {
  questionnaire: Section[] = [];
}

form-container.template.html

<form>
  <div *ngFor="let section of questionnaire" class="section">
    <div *ngFor="let question of section;">
      <input type="text">
    </div>
  </div>
</form>

Теперь просто слушайте капли и добавляйте элементы к своей анкете. Просмотр будет обновляться автоматически.

в FormContainerComponent add

@HostListener('drop', ['$event'])
handleContainerDrop(event) {
  // your logic to create "theDroppedSection"
  this.questionnaire.push(theDroppedSection);
}

Использование разных компонентов для элементов управления

Предполагая, что вы не хотите, чтобы всегда был один единственный html-вход элемент как элемент управления формой, вы можете создать один угловой компонент для каждого «типа управления» и создать что-то вроде FormControlContainer, который отвечает за загрузку нужного типа.

Остаться в примере вопросника: Создать на «QuestionComponent », который может загружать различные типы вопросов, например «YesNoQuestionComponent», «SingleTextInputQuestionComponent», ...

Это объясняется в https://angular.io/guide/dynamic-component-loader - просто замените их «AdBannerComponent» на «QuestionComponent» и посмотреть типы вопросов как «AdItem».