Добавление Angular dynamici c Component в указанное c место с помощью @Viewchild

Question

Angular CLI: 8.3.26 // Angular: 8.2.14

Я использую директиву ( open-chatpanel. diretive.ts ) для создания динамических c компонентов.

Все в порядке, кроме следующего: Я не могу понять, как добавить его в указанное c место? !?

Вот директива (open-chatpanel.diretive.ts)

import {
  Directive,
  HostListener,
  ComponentFactory,
  ComponentFactoryResolver,
  ViewChild,
  ViewContainerRef,
  ComponentRef
} from '@angular/core';

import { ChatpanelComponent } from "./chatpanel/chatpanel.component"; // The component to create


@Directive({
  selector: '[appOpenChatpanel]'
})
export class OpenChatpanelDirective {

  @ViewChild("chatpanelsContainer", { read: ViewContainerRef ,static: true }) container;

  open: boolean = false;  //open or not
  chatPanelRef: ComponentRef<ChatpanelComponent>;
  chatPanelFactory: ComponentFactory<ChatpanelComponent>;

  @HostListener('click') toggle() {
    if (open) { this.openChatpanel(); } else { this.closeChatpanel();}
  };

  constructor(
    private resolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef
  ) {
    this.chatPanelFactory = this.resolver.resolveComponentFactory(ChatpanelComponent);
  }

  private openChatpanel() {

    this.chatPanelRef = this.container.createComponent(this.chatPanelFactory);
    this.open = true;
    this.chatPanelRef.instance.close.subscribe(() => {
      this.chatPanelRef.instance.close.unsubscribe();
      this.chatPanelRef.destroy();
      //this.viewContainerRef.clear();
      this.open = false;
    });
  }

  private closeChatpanel() {
    this.chatPanelRef.instance.close.next();
    // Do you magic here
  }

}

Здесь компонент использует директиву ( appOpenChatpanel ) и определение места, где должны быть размещены компоненты Dynami c ( # chatpanelsContainer ). (Файл: app.component. html)

<div class="container">
  <div class="row my-2" >
    <div class="col-4">
      <h2>UserList</h2>
      <ul class="list-group my-2">
        <li class="list-group-item" appOpenChatpanel >User 1</li>
        <li class="list-group-item" appOpenChatpanel >User 2 </li>
        <li class="list-group-item">
          <button (click)="destroyComponent()">[Remove]</button>
        </li>
      </ul>

    </div>
    <!-- NOTICE: #chatpanelsContainer : Template Var in order to be abble to target this area for creating new Components -->
    <div class="col-8">
      <ng-template #chatpanelsContainer></ng-template>
    </div>
  </div>
</div>

Все, что я хочу сделать, это вставить новый динамический c компонент в

<ng-template #chatpanelsContainer></ng-template>

Но я всегда получаю сообщение:

ERROR TypeError: "this.container is undefined"
    openChatpanel open-chatpanel.directive.ts:41

Я не понимаю, как получить ng-шаблон #chatpanelsContainer в качестве ViewContainerRef, чтобы я мог использовать его для вставки своих новых компонентов.

Может кто-нибудь помочь мне, пожалуйста :) Материал для чтения, ответы, пример, пожалуйста, помогите, пожалуйста, помогите :) Не могу дождаться, чтобы прочитать вас, ребята и девушки. Заранее спасибо.

Редактировать: попытался создать стек стека (не уверен, что он хорошо сделан): https://angular-issue-repro2-vjhfrj.stackblitz.io