Как изменить компонент шаблона при событии в Angular 9?

Question

Я делаю первую библиотеку Angular 9. У меня есть следующие компоненты:

1. Layout
2. Frame

layout.component.ts

@Component({
  selector: 'foo-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class layoutComponent{}

layout.component. html

  <ng-content select=".layout-content"></ng-content>

В app.component. html, я инициализировал макет:

<foo-layout>
   <foo-frame class="layout-content">
     <any class="frame-content"></any>
     <any class="frame-content"></any>
     <any class="frame-content"></any>
   </foo-frame>
   <foo-frame class="layout-content">
     <any class="frame-content"></any>
   </foo-frame>
</foo-layout>

компонент кадра. html

  <button onClick="splitContent()"></button>
  <ng-content select=".frame-content"></ng-content>

Я бы хотел splitContent():

1. обернуть содержимое кадра двумя новыми кадрами компоненты
2. Добавьте часть содержимого в первый новый фрейм, а остальное - во второй

Таким образом, благодаря некоторым событиям, шаблон макета меняется на лету.

Вывод

<foo-layout>
   <foo-frame class="layout-content">
     <foo-frame class="frame-content new-frame-on-the-fly" >
         <any class="frame-content"></any>
         <any class="frame-content"></any>
     </foo-frame>
     <foo-frame class="frame-content new-frame-on-the-fly" >        
         <any class="frame-content"></any>
   </foo-frame>
   </foo-frame>
   <foo-frame class="layout-content">
     <any class="frame-content"></any>
   </foo-frame>
</foo-layout>

Как это сделать с Angular 9?