Modal is not wotking

Topic: Modal is not wotking

omerabbas pro asked 7 years ago

Hi kindly help . receiving below error when implementing ModalUncaught Error: Template parse errors: There is no directive with "exportAs" set to "bs-modal" (" waves-light" (click)="basicModal.show()" ripple-radius>Launch demo modal</button> <div bsModal [ERROR ->]#basicModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLa"):

Add comment

omerabbas pro answered 7 years ago

0 0 Best answer

I just copy it from that link https://mdbootstrap.com/angular/advanced/modals/

<pre class="code-toolbar language-markup"><code class=" language-markup"><button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show()" mdbRippleRadius>Launch demo modal</button>

<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
 <span aria-hidden="true">×</span>
 </button>
 <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
 </div>
 <div class="modal-body">
 ...
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbRippleRadius>Close</button>
 <button type="button" class="btn btn-primary relative waves-light" mdbRippleRadius>Save changes</button>
 </div>
 </div>
 </div>
</div></code></pre>

Please insert min. 20 characters.

I just copy it from that link https://mdbootstrap.com/angular/advanced/modals/

<button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show()" mdbRippleRadius>Launch demo modal</button>

<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbRippleRadius>Close</button>
                <button type="button" class="btn btn-primary relative waves-light" mdbRippleRadius>Save changes</button>
            </div>
        </div>
    </div>
</div>

Parik1990 pro commented 7 years ago

The problem might be because they updated components before they made the latest version available. In modal wherever you find mdb-modal change it to bs-modal or if any other prefix that was used earlier and the modal should work fine.

omerabbas pro commented 7 years ago

@Parik yes you are absolutely right they updated the docs to latest version without updating the components. i bought the angular version three weeks ago but now i am unable to use docs because i have 4.2 MDB Angular. BTW Modal is still not working i try to change MDB-Modal

Parik1990 pro commented 7 years ago

<pre>bsModal #frame="bs-modal"</pre> Try this and let me know mate. I had similar issue just changed to bs as shown in error and modal worked fine. Hope this works. Hopefully a stable version is released!

omerabbas pro commented 7 years ago

@Parik Thanks Bro ! its worked like a charm

Parik1990 pro commented 7 years ago

You're welcome! cheers mate :)

Add comment

Magdalena Obalska free answered 7 years ago