How to close bootstrap 4 model by calling a function in typescript

Question

I am using bootstrap 4 modal followed by the example

Below is the template code:

<div class="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Open
    </button>

    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            Modal body..
          </div>

           <button type="button" class="btn btn-danger"  (click)="save()">Save</button>

        </div>
      </div>
    </div>

  </div>

Here on clicking the open button i am opening dialog window,On clicking save button i will call save() method.In .ts i have written some conditions inside save method like this:

 save(){
  if(condition){
    ......don't close the modal....
  } else{
   ......close the modal....
   }
 }

How can i close the modal by calling the save() method in typescript ?

Stackblitz DEMO

Answer 1

The proper way to do this in Angular/Typescript is to use ViewChild .

First import ViewChild :

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

Add this line in your component, with the selector of your choice :

@ViewChild('myModalClose') modalClose;

Add the tag myModalClose in your html (here we target the close button) :

<!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" #myModalClose class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
  ...

In your save() method :

this.modalClose.nativeElement.click();

---

Working Stackblitz

Answer 2

You can use ng-bootstrap alternatively to control all this in your component class. ng-bootstrap

In typescript component code you need to inject NgbActiveModal in the constructor like this:

constructor(public activeModal: NgbActiveModal){}

and then in save method, you can just close it:

save(){
if(condition){
    ......don't close the modal....
  } else{
   this.activeModal.close();
   }
}

Answer 3

I have another solution without trick on close button.

First step you need install jquery and bootstrap by npm command.

Second you need add declare var $ : any; in component ( important step )

And use can use $('#myModal').modal('hide'); on onSave() method

Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Answer 4

Use Ngx bootstrap https://valor-software.com/ngx-bootstrap/#/modals

here is the common component for ngx bootstap modal.

<!-- Contains insides of a host element e.g. button text or link text -->
<ng-content></ng-content>
<!-- Dialog box content -->
<ng-template #modalWrapper>
  <!-- Header template -->
  <div class="modal-header">
    <h3 class="modal-title pull-left">{{ modalTitle }}</h3>
    <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <!-- Body template that consist of provided template reference content -->
  <div class="modal-body">
    <ng-container [ngTemplateOutlet]="modalContent"></ng-container>
  </div>
</ng-template>

Component.ts

export class AppModalComponent implements OnInit, OnChanges {
  /** Template Reference that is displayed as part of dialog box content */
  @Input('app-modal') public modalContent: TemplateRef<any>;
  /** Title of the dialog box */
  @Input() public modalTitle: string = '';
  /** Defines if modal is open */
  @Input() public isOpenByDefault: boolean = false;
  /** Modal reference */
  public modalRef: BsModalRef;
  /** Content config object */
  @Input() public config: ModalOptions = {};
  /** Event on modal open */
  @Output() public open = new EventEmitter<void>();
  /** Event on modal close */
  @Output() public close = new EventEmitter<void>();
  /** Wrapper template reference */
  @ViewChild('modalWrapper') public content: TemplateRef<any>;

  /** Injects modalService to manipulate modals */
  constructor(private modalService: BsModalService) { }

  public ngOnChanges(changes: SimpleChanges) {
    if (changes.config) {
      this.modalService.config = changes.config.currentValue;
    }
  }

  public ngOnInit(): void {
    this.isOpenByDefault ? this.openModal() : this.closeModal();
  }

  /** On click of host element opens a modal with provided modal content */
  @HostListener('click')
  public openModal(): void {
    this.modalRef = this.modalService.show(this.content, this.config);
    this.open.emit();
  }

  /** On click of close button closes the modal */
  public closeModal(): void {
    if (this.modalRef) {
      this.modalRef.hide();
      this.close.emit();
    }
  }
}

Usage :

<button [app-modal]="template" modalTitle="Modal Title" [isOpenByDefault]="false" #modalRef>Open modal</button>
<ng-template #template>
  <h4>Hello world</h4>
</ng-template>