Создание динамического компонента в ng-контейнере, добавление ng-шаблона и мониторинг ngModel

Question

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

Это выглядит примерно так:

@Component({
  selector: 'app-custom-container',
  templateUrl: './custom-container.component.html',
  styleUrls: ['./custom-container.component.css']
})
export class CustomContainerComponent implements OnInit {
  @Input() template: TemplateRef<any>;
  @Input() addButtonLabel: string;
  
  templates: Array<TemplateRef<any>> = [];
  constructor() { }

  ngOnInit() {
    this.templates.push(this.template);
  }
}

HTML, у меня есть add button кнопка, чтобы добавить больше шаблонов к себе динамически, и у меня есть trash button удалить шаблоны:

<ng-container *ngFor="let template of templates; let index = index; let last = last;">
    <button type="button" (click)="templates.splice(index, 1);" class="trash-button"></button>
    <ng-container *ngTemplateOutlet="template; context:{index:index}"></ng-container>
</ng-container>
<div (click)="templates.push(template)" class="add-button">{{addButtonLabel}}</div>

Я использую этот компонент, как это:

<app-custom-container" [template]="tpl" addButtonLabel="ADD TEMPLATE"  addButtonClass="add-butto"></app-custom-container>
<ng-template #tpl let-index="index">
    <p-dropdown [options]="mylist" [autoWidth]="false" [(ngModel)]="myData[index]" name="myName{{index}}"
        required>
    </p-dropdown>
</ng-template>

Я использую нг-премьер, таким образом, p-dropdown,

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

Проблемы у меня есть:

• Я не уверен, что это лучший дизайн для моих целей. index это сообщается обратно, мне кажется довольно неловким.
• В основном это работает, за исключением splice часть. Когда я splice Однако модель данных получает новые индексы после container рендеринг снова и все беспорядок, данные не sit где это должно. Я тоже думал об отправке данных, чтобы компонент управлял ими, но я не уверен, что это правильно и даже как это сделать.

Буду признателен за ваши советы и добавить информацию, если что-то не ясно.

Обновление 1: добавить плнкр.

Как видите, я добавляю элементы, а когда пытаюсь их удалить, он удаляет снизу. Я должен знать, хорош ли мой базовый подход, и затем понять, как удалить и обновить мой массив данных соответственно.