Как открыть содержимое компонента в модальном режиме начальной загрузки?

У меня есть компонент, который я хочу внедрить в модальное окно с помощью функций ng bootstrap, поэтому я импортировал модули в приложение, а также добавил их в точки входа, как это предлагается в документах ng-bootstrap, что доставляет мне мало проблем. каков правильный подход, в основном я вызываю модальный из существующего компонента, и этот компонент должен загружаться в модальное окно. любая помощь будет оценена.

modal.component.ts

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

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

деталь.компонент.ц

import { Component, OnInit,Pipe, PipeTransform, EventEmitter,Input, Output,OnChanges, SimpleChanges } from '@angular/core';
import {NgbModal,NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

  @Component({
      selector: 'app-detail',
      templateUrl: './detail.component.html',
      styleUrls: ['./detail.component.css'],

    })
export class DetailComponent implements OnChanges{

constructor(private detailService: DetailService,private ngbModal: NgbModal) {};

onClick(evt){
     const modalRef = this.ngbModal.open(Component);

   }
}

detail.component.html

<div class="card card-outline-info">
  <div class="card-header bg-info"><h5>Detail</h5><button (click)="onClick($event)"></button></div>
  <div class="card-block">
      <div class="table-responsive" style="cursor: pointer">
        <generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
      </div>
    </div>
  </div>

app.module.ts

import { NgbModule,NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { NgbdModalContent } from './NgModal/modal.component';


@NgModule({
  declarations: [
    AppComponent,
    StreamComponent,
    SearchComponent,
    DetailComponent,
    SlaChartComponent,
     NgbdModalContent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpModule,
    ChartsModule,
    BrowserAnimationsModule,
     NgbModule.forRoot()

  ],
  providers: [StreamService,DatePipe,
              SearchService,
              DetailService,
              ChartService,AuthService,NgbActiveModal,
            {provide: HTTP_INTERCEPTORS,
            useClass: TokenInterceptor,
            multi: true}],
  entryComponents: [NgbdModalContent,DetailComponent],
  bootstrap: [AppComponent]
})