2

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?

Omer
  • 1,727
  • 5
  • 28
  • 47

1 Answers1

3

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.

UncleDave
  • 6,872
  • 1
  • 26
  • 44
  • :( I wish I used ng-bootstrap ... Now I have used Standard bootstrap How can I close the modal from my typescript code? – Omer Oct 03 '17 at 11:58
  • One more question Uncle ... Can switch to ng-bootstrap? – Omer Oct 03 '17 at 11:59
  • The 2nd part of the answer explains how to do it with standard jQuery. Switching to ng-bootstrap at this point won't be too easy, you'll have to rewrite all usages of bootstrap components such as modals. – UncleDave Oct 03 '17 at 12:00
  • Actually second part explains how to do it with jQuery `$('#myModal').modal('hide')` I don't think I can use `$('#myModal').modal('hide')` piece of code in my TS file. – Omer Oct 03 '17 at 12:19
  • Your reply to Himanshu Upadhyay confirms you have jquery included in your project, so you should be able to use it. How did you open the modal? – UncleDave Oct 03 '17 at 12:27
  • I'm opening the modal with a button like this: `` using `data-toggle="modal" data-target="#userModal"` – Omer Oct 03 '17 at 12:29
  • These attributes actually use jQuery under the hood to do what they do, there's a similar attribute you can put on your modal buttons to close it, but obviously that won't allow you to close the modal only if your angular code executes successfully. I would try the jQuery solution, if it doesn't work show the error. – UncleDave Oct 03 '17 at 12:32
  • So how can we use jQuery in our TS file? – Omer Oct 03 '17 at 12:37
  • jQuery is a javascript library - `$('#myModal').modal('hide')` is just Javascript and should work perfectly fine in any TS file, provided jQuery is available. – UncleDave Oct 03 '17 at 12:38
  • Ok trying it :) – Omer Oct 03 '17 at 12:39
  • It gives me an error if I try to add `$` or `jQuery` in my TS file. – Omer Oct 03 '17 at 12:41
  • Do I have to import jQuery first? – Omer Oct 03 '17 at 12:42
  • 1
    As with all external dependencies in typescript yes, try `import * as $ from 'jquery'` at the top of your file. – UncleDave Oct 03 '17 at 12:43
  • I have successfully added jQuery in the TS file with your suggestion. But when I try to call `$('#myModal').modal('hide')` its shows an error. **UsersComponent.html:60 ERROR TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery__(...).modal is not a function** because .modal is not a jQuery function. – Omer Oct 03 '17 at 12:52
  • Is this a compilation error or a runtime error? You may also need to `import 'bootstrap'` after jQuery. – UncleDave Oct 03 '17 at 12:56
  • Do you have bootstrap's js file imported in your `.angular-cli.json` after jQuery? – UncleDave Oct 03 '17 at 13:08
  • Actually I made it work with this answer: https://stackoverflow.com/questions/35354041/how-can-i-close-a-modal-in-angular-2 .... Is this the right approach? – Omer Oct 03 '17 at 13:15
  • This is fine as long as your `onSubmit` function has no failure case. Since it closes the modal and calls the function at the same time - if the function fails it doesn't care, the modal will still close. – UncleDave Oct 03 '17 at 13:17
  • Actually its mimicking the click event. If we can figure out a proper way then it would be nice. :) – Omer Oct 03 '17 at 13:19
  • Your issue is that the bootstrap jquery functions aren't being registered for some reason. My last suggestion would be to install the type definitions and see if it helps: `npm install --save-dev @types/bootstrap` – UncleDave Oct 03 '17 at 13:26
  • Na! didn't work... But my editor seems to read the .modal() function now... Same error on runtime. BTW what is @types/bootstrap – Omer Oct 03 '17 at 13:33
  • It's a typescript definition package that exists to let typescript know what types are added by bootstrap. As the bootstrap library is javascript, it doesn't have these by default. For some reason it seems as if your jQuery object is not being augmented with bootstrap's new functions – UncleDave Oct 03 '17 at 13:35
  • Yeah... So I guess I have to stick with '@ViewChild` and `ElementRef` for now. Thanks for your time Uncle :) – Omer Oct 03 '17 at 13:36