Delete Dynamic Components, one by one?

I can dynamically create a number of components and I want to be able to delete each one separately by clicking a button on each component. I have a working demonstration project which I kept as simple as possible.
Please look at my stackblitz.
That works the way I want it to work. But, I was hoping that there was an easier way.
Here is app.component.ts

import {
  Component,
  ViewChild,
  ComponentFactoryResolver,
  ViewContainerRef,
  ComponentRef,
  OnDestroy
} from "@angular/core";
import { DynamicComponent } from "./dynamic/dynamic.component";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnDestroy {
  private _count = 0;
  componentRef: ComponentRef<DynamicComponent>;
  dynamics: Map<string, ComponentRef<DynamicComponent>> = new Map();
  @ViewChild("viewcontainer", { read: ViewContainerRef, static: false })
  viewContainerRef: ViewContainerRef;
  constructor(private resolver: ComponentFactoryResolver) {}
  createComponent() {
    this._count++;
    const factory = this.resolver.resolveComponentFactory(DynamicComponent);
    this.componentRef = this.viewContainerRef.createComponent(factory);
    this.componentRef.instance.name = " " + this._count;
    this.dynamics.set(this.componentRef.instance.name, this.componentRef);
    this.componentRef.instance.deleteName.subscribe(
      name => this.destroyComponent(name),
      error => console.log(error)
    );
  }
  destroyComponent(name: string) {
    if (this.dynamics.has(name)) {
      this.dynamics.get(name).destroy();
    }
    this.dynamics.delete(name);
  }
  ngOnDestroy() {
    this.dynamics.forEach(
      (value: ComponentRef<DynamicComponent>, key: string) => {
        value.instance.deleteName.unsubscribe();
      }
    );
    this.dynamics = null;
  }
}

here is app.component.html

<button (click)="createComponent()">Create a Component</button>
<ng-container #viewcontainer></ng-container>

here is dynamic.component.ts

import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-dynamic",
  templateUrl: "./dynamic.component.html",
  styleUrls: ["./dynamic.component.css"]
})
export class DynamicComponent {
  @Input() name: string;
  @Output() deleteName = new EventEmitter<string>();
  constructor() {}
  delete() {
    this.deleteName.emit(this.name);
  }
}

here is dynamic.component.html

<div>
    {{ name }} <button (click)="delete()">Delete</button>
</div>

I added the following line to app.module.ts

entryComponents: [DynamicComponent]

My question: Is there an easier way? Could @ViewChildren be used? Something like?

@ViewChildren(DynamicComponent) dynamics: QueryList<DynamicComponent>;  

Source: New feed
Source Url Delete Dynamic Components, one by one?