Get started with ng2-bootstrap CDN

import { Component } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="openModal()" class="btn btn-primary">Open Modal</button>

    <ng-template #modalContent let-c="close">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
        <button type="button" class="close" (click)="c.dismiss('Cross click')">×</button>
      </div>
      <div class="modal-body">
        <p>Hello from a modal!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="c.close('Close click')">Close</button>
      </div>
    </ng-template>

    <ng-container *ngIf="!modalRef">
      <ng-template #content>
        <p>Click the button to open the modal.</p>
      </ng-template>
      <ng-container *ngIf="!modalRef">
        <ng-bootstrap #bsModalContext="bsModalContext">
          <ng-template #bsViewContainerRef="viewContainerRef">
            <ng-template #modal>
              <ng-container *ngIf="!modalRef">
                <modal-content #modalContent [show]="false" class="modal-dialog modal-lg" backdrop="static" [container]="bsViewContainerRef">
                  <button type="button" class="close" (click)="modalRef.hide()">×</button>
                  <ng-content #modalContent></ng-content>
                </modal-content>
              </ng-container>
            </ng-template>
          </ng-template>
        </ng-bootstrap>
      </ng-container>
    </ng-container>
  `
})
export class AppComponent {
  modalRef: ModalDirective;

  openModal() {
    this.modalRef = this.bsModalContext.show(this.modalContent, { class: 'modal-lg' });
  }
}