Angular 4: Close modal after form submit event is finished

Question

i am using bootstrap 4 modal.when i press the close button modal closes properly. but i want to close the modal after submitting the create button present in the form. i am using angular 4.

<div class="modal fade" id="createLabel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">New project</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
   <form name="form"  (ngSubmit)="f.form.valid && newproject(createLabel)" #f="ngForm" novalidate >
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !projectname.valid }">
            <input type="text" class="form-control" placeholder="Your Project Title. Eg. Building Ark v1.0" name="projectname"  [(ngModel)]="createLabel.projectname"  minlength="3" #projectname="ngModel" required />
            <div *ngIf="f.submitted && !projectname.valid" class="help-block" style="color: red;">Atleast 3 charater</div>
            </div>
            <div class="form-group" >
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button [disabled]="loading" class="btn btn-primary" >Create</button> </div>
        </form>
  </div>

 </div>
</div>

Answer 1

You don't have to use jQuery or other external libraries when you're using Angular. All you need is an EventEmitter that emits an event when the form is submitted.

Look at this code sample I made:

First the code for the modal

modal.component.html

<div>
   <h1>This is my modal</h1>
   <button (click)="onCloseModal($event)">Submit form</button>
</div>

modal.component.ts

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
  @Output() closeModalEvent = new EventEmitter<boolean>();

  constructor() { }

  onCloseModal(event: any){
   this.closeModalEvent.emit(false);  
  }
}

Now the code for the parent

parent.component.html

<div>
  <app-modal [modalVisible]="isVisible" (closeModalEvent)="onClose($event)"></app-modal>
  <button (click)="showModal()">open modal</button>
</div>

parent.component.ts

@Component({
      selector: 'app-parent',
      templateUrl: './parent.component.html',
      styleUrls: ['./parent.component.scss']
    })
    export class ModalComponent {
      modalVisible = false;

      constructor() { }

      onClose(isVisible: boolean){
       this.modalVisible = isVisible;
      }

      showModal(){
       this.modalVisible = true;
     }
    }

Answer 2

If you want to close modal from component then you can use

$("#createLabel").modal("hide");

Else you can change the type of sumbit button from 'submit' to button and use as follows

<button type="button" (click)='onsubmit()' data-dismiss="createLabel">Create</button>

this will close your modal and call you submit function at the same time.

Answer 3

the easy way to close popup modal on submit is this

<a class="confirm" data-dismiss="modal" (click)="save()">Confirm</a>

Answer 4

It looks like to me you have a couple of options here.

1.) Add the data-dismiss to your Create button as well.

2.) You can use @ViewChild from @angular/core and JQuery to get reference to the modal and then on click of Create you can close it.

For the second option you will have to import JQuery into your project, whatever that means for you. Then you can use ViewChild with JQuery like this:

@ViewChild('completeModal') completeModal: ElementRef;
$(this.completeModal.nativeElement).modal('hide');