0

I want to implement the Bootstrap modal in my angular2project. I tried with Bootstrap and jQuery, but my modal does not fade in. And I also tried an Angular dependency ng2-bs3-model, the same issue exists for that dependency also.

Is there any better way to implement the Bootstrap modal in Angular 2?

this is my applications after adding model

Luca Kiebel
  • 9,790
  • 7
  • 29
  • 44
Ansar Samad
  • 572
  • 2
  • 11
  • 34

1 Answers1

1

You could try native modal implementation from the ng-bootstrap project: https://ng-bootstrap.github.io/#/components/modal

The advantage is that those are native Angular directives which means that you wouldn't need to include jQuery or any other 3rd party JavaScript. The implementation of the modal service from https://ng-bootstrap.github.io/#/components/modal is very easy to use. There is a service to which you can pass a component to be used as modal's content. In most cases opening a modal is one-liner:

this.modalService.open(NgbdModalContent);

You can see a working example in action in this plunk: http://plnkr.co/edit/1epmosa7mqHiwF66oHEV?p=preview

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
  • thank you for the comments , i tried using the ng-bootstrap project , but am not able to display the dialogue. i have done the same way described on the site . but while clicking the button the dialogue is not opening .no errors found in the console. – Ansar Samad Apr 23 '17 at 11:31
  • But I've linked a working plunker.... You can always compare code in the plunker with your setup. – pkozlowski.opensource Apr 23 '17 at 11:46
  • please check this URL : [ng-bootstrap-modal-is-not-displaying](http://stackoverflow.com/questions/43570776/ng-bootstrap-modal-is-not-displaying) , i have added a new question regarding this , could you please check that too and let me know if am missing something – Ansar Samad Apr 23 '17 at 11:50
  • thank you , i forgot to add the bootstrap css . its working fine now . – Ansar Samad Apr 23 '17 at 12:18
  • This ng-bootstrap only works with Bootstrap 4 , it's not compatible with Bootstrap 3 – Ansar Samad Apr 24 '17 at 14:47