typescript - Angular 8'de bir Bootstrap modal penceresinde bir bileşen görünür olduktan sonra fonksiyon nasıl çalıştırılır?

Angular projemde, verilerimi veri modellerimden alan bir select-box bileşenim var. Seçenekler temelde bir servisden geliyor, seçilen değer ise şu anda açık olan veri modelinden geliyor.

Select etiketinin yanına bir ekle butonu eklemek istiyorum. Kullanıcı bu butona tıklarsa, select'te gösterilen model için bir form içeren bir modal pencere açılır. Kullanıcı burada modele yeni bir örnek eklerse, veriler depolamaya kaydedilecek ve select bu yeni örnek ile güncellenecektir.

Birçok seçim alanı olan karmaşık formlar kullanıyorum - birçok artı butonu ile geliyor, birçok oluşturma bileşeni açıyor.

Bu bileşenleri, kullanıcı verilen artı düğmesine tıklayana kadar render etmekten kaçınmak istiyorum.

İşte benim üst bileşenimin TypeScript kodu:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // this coming from a data service
  langs = [
    {id: 1, name: 'english'},
    {id: 2, name: 'deutsch'},
    {id: 3, name: 'latin'},
  ];

  // coming from a data service
  model = {
    id: 100,
    name: 'John Doe',
    lang_id: 3,
  }
}

İşte şu anda seçme bileşenimi nasıl kullandığıma bir örnek:

<app-select-box [items]="langs" [selectedValue]="model.lang_id">
  <app-lang-create-edit></app-lang-create-edit>
</app-select-box>

İşte benim select-box bileşenimin HTML kodu:

<div class="input-group">
  <select class="form-control">
      <ng-container *ngFor="let item of items">
        <option [value]="item[value]">{{ item.names[0][text] }}</option>
      </ng-container>
  </select>
  <div class="input-group-append" *ngIf="!buttonHide">
    <button class="btn btn-light" tabindex="-1" (click)="showModal(modal)"> + </button>
  </div>
</div>

<!-- Modal -->
<div class="modal" tabindex="-1" role="dialog" *ngIf="isModalOpen">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title">Add new element</h5>
      <button type="button" class="close" (click)="hideModal()">
          <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
          <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>

Bence sorun, ng-content etiketinin kullanımından kaynaklanıyor, çünkü <div class="modal" ...> render edildiği anda gelen kodu da aynı anda render ediyor.

İşte daha ayrıntılı kodlarla çalışan örnek.

Modal görünür olana kadar app-lang-create-edit bileşenini bir şekilde render etmekten kaçınabilir miyim?

Kullanıcı modal diyaloğu kapatıp tekrar açarsa her seferinde yeniden renderlamak istiyorum.

Herhangi bir çözüm var mı?