Example to deploy a basic modal.

Modal

    
  constructor(private modalService: ModalService) { }

  openModal(modal: any): void {
    this.modalService.open(modal).result.then(result => {
      console.log(result);
    }, (reason) => {
      console.log(reason);
    });
  }
  

    
  <button (click)="openModal(modal1)">Modal</button>
  
  <ng-template #modal1 let-modal>
    <div class="lux-modal-header">
      <h4 class="modal-title" id="modal-basic-title">Modal Example</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="lux-modal-body">
      <form>
        <div class="form-group">
          <label for="message">Say Something</label>
          <div class="input-group">
            <lux-input #input placeholder="Write something..."></lux-input>
          </div>
        </div>
      </form>
    </div>
    <div class="lux-modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close(input.value)">Send</button>
    </div>
  </ng-template>
  

Nesting modal

    
  message: string;

  constructor(private modalService: ModalService) { }

  openModal(modal: any): void {
    this.modalService.open(modal).result.then(result => {
      console.log(result);
    }, (reason) => {
      console.log(reason);
    });
  }

  openModalWithoutBackdrop(modal: any): void {
    this.modalService.open(modal, {backdrop: false})).result.then(result => {
      console.log(result);
    }, (reason) => {
      console.log(reason);
    });
  }
  

      
    <button (click)="openModal(modal2)">Modal</button>
    
    <ng-template #modal2 let-modal>
      <div class="lux-modal-header">
        <h4 class="modal-title" id="modal-basic-title">Modal nesting example</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="lux-modal-body">
        <p>Message from Modal 2: { {message} }</p>
        <button (click)="openModalWithoutBackdrop(modal3)">Modal 2</button>
      </div>
      <div class="lux-modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close()">Close</button>
      </div>
    </ng-template>

    <ng-template #modal3 let-modal>
      <div class="lux-modal-header">
        <h4 class="modal-title" id="modal-basic-title">Modal nesting example</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="lux-modal-body">
        <form>
          <div class="form-group">
            <label for="message">Say Something</label>
            <div class="input-group">
              <lux-input #input placeholder="Write something..."></lux-input>
            </div>
          </div>
        </form>
      </div>
      <div class="lux-modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close(input.value)">Send</button>
      </div>
    </ng-template>