Error Ngx-Bootstrap Modal with Directives Angular 6

Question

core.js:1633 ERROR Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "exportAs" set to "bs-modal" ("

]#staticModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-label"): ng:///MobileModule/PerfilConfigComponent.html@1069:34 Can't bind to 'config' since it isn't a known property of 'div'. ("

<input class="text-center form-control"
 formControlName="grupos"
 pInputText
 autocomplete="off"
 type="text"
 appBlur
 [focusRemove]="true"
 placeholder="Informe os grupos de produtos"
 [pTooltip]="perfilHints?.grupos"
 tooltipPosition="top"
 [showDelay]="2000"
 [escape]="false"
 [life]="12000"
 (click)="staticModal.show()"/>
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
 tabindex="-1" role="dialog" aria-labelledby="dialog-static-name">
 <div class="modal-dialog modal-sm">
 <div class="modal-content">
 <div class="modal-header">
 <h4 id="dialog-static-name" class="modal-title pull-left">Static modal</h4>
 <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="modal-body">
 This is static modal, backdrop click will not close it.
 Click <b>&times;</b> to close modal.
 </div>
 </div>
</div>

It's the same example from ngx-bootstrap. With service is working.

• JFPicard: Which version of ngx-bootstrap do you use ?
• Francesco Borzi: have you added ModalModule.forRoot() to the imports of your angular module?
• Faqtt0: constructor(private headerNavService: HeaderNavbarService) { setTheme('bs4'); }
• Faqtt0: import { ModalModule } from 'ngx-bootstrap/modal'; imports: [ModalModule.forRoot()]
• Faqtt0: it's working with service example

Answer 1

Maybe you don't import ModalModule in your module because angular didn't found any directive bs-modal in you are App:

Add ModalModule.forRoot() to your modul.

Answer 2

I found the solution for problem. I have to import to other modules ModalModule. I don't know why the reason, because it's imported in "app.module", sharing the import with others. The problem occours just if use directive.

• Francesco Borzi: what modules were you missing? can you be more specific?
• Faqtt0: I Added in app.module. But in app module, just the service working in another modules. I've to add ModalModule.forRoot() for every module that i want to use Dialog with directive. Now it's working that way.