There is no directive with "exportAs" set to "bs-modal" when using ng2-bootstrap

Question

I am following the example given here https://valor-software.com/ng2-bootstrap/#/modals

But when i put the template in my html

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
.........
.......

</div>

i also have below entry in my app.module.ts

import { ModalModule } from 'ng2-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})

and below message shows up, i am not sure what i am missing

EXCEPTION: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" ("
</p-dialog>

<div class="modal fade" bsModal [ERROR ->]#staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labell"): PreCheckComponent@80:32
Can't bind to 'config' since it isn't a known property of 'div'. ("
</p-dialog>

according to guide i dont have to import anything to my component

i just added some code, let me know if anything else you want me to add — josh_boaz, Mar 18 '17 at 14:39
actually i am unable to import ModalDirective, its giving me errors — josh_boaz, Mar 18 '17 at 14:42

score 11 · Answer 1 · answered Mar 10 '19 at 14:37

11

You need to import ngx-bootstrap modal module on your module like below:

import { ModalModule } from "ngx-bootstrap";
@NgModule({
  imports: [
    ModalModule.forRoot()
    ]
})

answered Mar 10 '19 at 14:37

Abdus Salam Azad

5,087
46
35

Import of ModalModule.forRoot() helped me. – Dnyaneshwar Harer May 24 '21 at 07:28

score 8 · Accepted Answer · edited May 23 '17 at 10:31

8

You must be missing the below line in your component

@ViewChild('staticModal') public staticModal:ModalDirective;

For more information on ng2-bootstrap modal you can see this post which contains the demo as well.

edited May 23 '17 at 10:31

Community

1
1

answered Mar 18 '17 at 14:40

Aravind

40,391
16
91
110

score 5 · Answer 3 · answered Jul 19 '20 at 07:20

Just incase if you are on this thread because you are getting same error even if you have added following line to NgModule

ModalModule.forRoot()

Make sure your import is the correct one.

Correct import

import { ModalModule } from 'ngx-bootstrap/modal';

Wrong import

import { ModalModule } from 'ngx-bootstrap/modal/public_api';

score 1 · Answer 4 · answered Feb 14 '19 at 18:34

1

You are missing ModalDirective.

@ViewChild('yourModal') public YourModal:ModalDirective;

answered Feb 14 '19 at 18:34

Abdus Salam Azad

5,087
46
35

There is no directive with "exportAs" set to "bs-modal" when using ng2-bootstrap

4 Answers4