CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapangular
Omer
Omer

Reputation: 1806

Close Bootstrap 4 modal on submit event in Angular 4

I'm working on an Angular 4 application with Bootstrap 4.

I have implemented a bootstrap modal component which works fine. On click it shows and clicking on cross closes it.

The modal contain a form to add a user.

enter image description here

And on clicking on Add User button adds the user properly.

All I want is to close the modal if users added success fully.

I used onSubmit() function in Angular component:

onSubmit({value, valid}) {
    if (valid) {
      console.log(value);
      this.formInvalid = false;
      this.userMeta = value;
      this.allUsers.unshift(this.userMeta);
    } else {
      console.log('Form is invalid!', valid);
      this.formInvalid = true;
    }
  }

So is there any way I can close the modal in this function?

Upvotes: 2

Views: 5992

Answers (1)

UncleDave
UncleDave

Reputation: 7188

Presuming you are using the project ng-bootstrap (which you should be to use bootstrap components with Angular, rather than jQuery)

In the modal component you can grab a reference to itself via dependency injection:

constructor(public modal: NgbActiveModal) { }

Then you can use the appropriate methods:

modal.dismiss() to close with an error/reason.

modal.close(something) to close with a result, your userMeta for example - whatever you want to return.

If you're using standard Bootstrap with the jQuery dependency instead of the Angular version, you should just be able to use $('#myModal').modal('hide') as described here.

Upvotes: 3

Related Questions