angularjsangulartypescriptangular2-templateng2-bootstrap

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

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

Solution

  • 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.