Search code examples
angularmodal-dialogngx-bootstrap

Error Ngx-Bootstrap Modal with Directives Angular 6


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.


Solution

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