Угловое самозакрывание автоматически сгенерированных компонентов

Question

Я использую Angular 7 и создаю компоненты на лету так:

import { Component, ElementRef, OnInit, ViewChild, ComponentFactoryResolver, Input } from '@angular/core';
import { InjectDirective } from '../../directives/inject.directive';
import { ListComponent } from '../list.component';


@Component({
  selector: 'app-terminal',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  addComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ListComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    viewContainerRef.createComponent(componentFactory);
  }

  removeComponent() {
    const viewContainerRef = this.injectComp.viewContainerRef;
    viewContainerRef.remove();
  }

}

То, что я выполняю метод addComponent(), создает новый компонент, и когда я выполняю метод removeComponent() (Сглавный компонент) компоненты закрываются один за другим.

Проблема в том, что я закрываю компоненты от основного компонента.

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

Как я могу это сделать?