Добавьте динамический компонент Angular 8 с тем же дизайном и другим содержанием после нажатия

Question

Ситуация следующая: у меня есть список пользователей в главном компоненте (компонент приложения), и я хочу добиться того, чтобы при нажатии на каждого пользователя отображалось окно чата с сообщениями, отправленными тем пользователем, которомуЯ нажал, если я нажму на двух пользователей, я должен показать окна сообщений друг друга рядом друг с другом, я также смогу закрыть каждое окно, идентично операции чата Facebook. Я новичок в использовании Angular, пожалуйста, если кто-нибудь может мне помочь?

app.component.html

<div class="sidenav">
  <ul *ngFor="let persona of personas">
    <li><a id="{{persona.id}}">{{persona.nombre}}</a></li>
  </ul>

</div>

spokacion.component.html

<div class="screen"style="position: fixed;bottom: 10vh;right: 200px">
    <div style="height: 20px;background-color: red">
        Chat
    </div>
    <div class="conversation"#scrollMe [scrollTop]="scrollMe.scrollHeight" *ngIf="messages.length > 0">

        <div class="messages" [ngClass]="{'messages--sent': message.userId == user , 'messages--received': message.userId != user }" *ngFor="let message of messages">
            <div class="message">
                <div class="user">{{ message.userId.username }}<span class="range admin">Dev</span></div>
                <p> {{ message.message }} </p>
                <time>{{ message.time }}</time>
            </div>
        </div>    
    </div>
    <div class="text-bar">
        <div class="text-bar__field" id="form-message">
        <textarea type="text" #msgInput (keydown)="autoResize($event)" (keydown.enter)="sendMessage(msgInput.value);false;msgInput.value='';" placeholder="Say something">
        </textarea>
        </div>

    </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import {ChatService} from "./services/chat.service";
import {Mensaje} from "./models/mensaje";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
    providers:[ChatService]
})
export class AppComponent {
  title = 'chat';
  public id_usuario_destino:number;
  public personas:Array<any>;
  public id_persona:number;
  constructor(private  _chatService:ChatService){
    this.personas=[
        {id:"2",
         nombre:"sergio"
        },
        {id:"3",
            nombre:"jhoyner"
        },
        {id:"4",
            nombre:"gerardo"
        },
        {id:"5",
            nombre:"fabrizio"
        }
    ]
  }

    enviaid(id){
        this.id_usuario_destino=id.id;
      this.id_persona=this.id_usuario_destino;
        this._chatService.getMessages(1,this.id_usuario_destino).subscribe(
            response=>{
                console.log(response)

            },
            error=>{
                console.log(error);
            }
        );
    }
}

Я хотел бы сделать это: