Как открыть модальное диалоговое окно в angular 6

Question

Я создал модальное диалоговое окно в angular 6, и это диалоговое окно должно отображаться, когда я щелкаю ячейку в таблице.

Код шаблона компонента модального диалогового окна представлен ниже.

<div #leaveModal class="modal fade" id="leaveModal"   tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="false">
   <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Leave Classroom</h4>
            <button type="button" class="close" data-dismiss="modal">
            &times;
            </button>
         </div>
         <div class="modal-body">
            <p>Are you sure you want to leave the classroom?</p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary float-right  lg" data-dismiss="modal" >
               Close
            </button>
            <button type="button" class="btn btn-custom lg mr-2 float-right" data-dismiss="modal" (click)="onLeave()">Leave</button>
         </div>
      </div>
   </div>
</div>

Код события разового щелчка указан ниже

onCellClicked($event) {
  this.selectedRowIndex = $event.rowIndex;
  console.log("[userDetailsComponent] :: onCellClicked():: selectedRowIndex::" + this.selectedRowIndex);
  console.log($event);


  if ($event.colDef.headerName == 'Leave Classroom') {
    this.leaveModal.open('lg');

Кроме того, в модальном диалоговом классе есть метод с именем open(), но при вызове он отображает ошибку:

ОШИБКА TypeError: "this.leaveModal.open не является функцией

Не могли бы вы объяснить, в чем здесь ошибка и как ее устранить.

Заранее спасибо.

Answer 1

component.html

<div #leaveModal class="modal" id="leaveModal" [class.d-block]="show" [class.d-none]="!show"  tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="false">
   <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Leave Classroom</h4>
            <button type="button" class="close" (click)="closeModalBox()" data-dismiss="modal">
            &times;
            </button>
         </div>
         <div class="modal-body">
            <p>Are you sure you want to leave the classroom?</p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary float-right  lg" (click)="closeModalBox()" data-dismiss="modal" >
               Close
            </button>
            <button type="button" class="btn btn-custom lg mr-2 float-right" data-dismiss="modal" (click)="onLeave()">Leave</button>
         </div>
      </div>
   </div>
</div>



Component.ts:


export class AppComponent  {
  show: boolean;


  openModalBox() {
    this.show = true;
  }

  closeModalBox() {
    this.show = false;
  }
}





You Can simply play with css in modal popup

Answer 2

Для открытия модалов вы можете использовать NgbModal и использовать его достаточно эффективно. https://ng-bootstrap.github.io/# / компоненты / модальные / примеры

<code><ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="dateOfBirth">Date of birth</label>
        <div class="input-group">
          <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<hr>

<pre>{{closeResult}}

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

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

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}