(click)=frame.show() equivalent from within Angular

web
mobile

Topic: (click)="frame.show()" equivalent from within Angular

krakow47 pro asked 3 months ago

I am playing around with the pro modal component.

This is a sample of the button code to show the modal:

<button
        type="button"
        mdbBtn
        color="default"
        rounded="true"
        data-toggle="modal"
        data-target="#basicExample"
        (click)="frame.show()"
        mdbWavesEffect
      >
        Launch Modal
      </button>

I would like to execute the (click)="frame.show()" event from within Angular. I have a service and would like to call the frame.show() method directly. How could I achieve this?

Thanks in advance.

\=====================================================================

Update:

\=====================================================================

Please take a look at this example:

"Cascading modal register/login" from the https://mdbootstrap.com/docs/angular/modals/forms/ page.

The first few example html lines are:

<button
  type="button"
  mdbBtn
  color="default"
  rounded="true"
  data-toggle="modal"
  data-target="#basicExample"
  (click)="frame.show()"
  mdbWavesEffect
>
  Launch Modal
</button>

<div
  mdbModal
  #frame="mdbModal"
  class="modal fade top"
  id="frameModalTop"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
  aria-hidden="true"
>

I have no frame object declared or such a class that I know of so I get an error in typescript if I try to use it.

I assume that it is a javascript class that MDBootstrap is using?

How can I use this class in my typescript class? Or get that functionality because I am trying to frame.show() and frame.hide() the modal from my typescript class.

I am doing this because I am using a service in order to close or open the modal from multiple other classes / components.

The service is working but I just need a way to call this frame.show() / frame.hide() programmatically from typescript.


Konrad Stępień staff commented 3 months ago

Hi @krakow47,

Can you also provide for me code of TS file?

You should use function like this:

    (click)="show()"

And then create function in your ts file:

show() {
      //do something
}

krakow47 pro commented 3 months ago

I updated my question :)


krakow47 pro answered 3 months ago

The code for this was relatively simple.

In the related component I just added:

@ViewChild ('frame') public modal: any;

frame was used because the element id is 'frame'

Then in your related method you can just call the show() method:

showModal( ) {
      this.modal.show();
    };

Bind that to a service and then any component can open or close the modal.


Konrad Stępień staff commented 3 months ago

Can you confirm that the problem is resolved, or do you have additional issues?


krakow47 pro commented 3 months ago

I can confirm that this solved my problem :)


Konrad Stępień staff commented 3 months ago

I will change the status of the problem for resolved :)

Best, Konrad.


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 9.0.1
  • Device: Desktop
  • Browser: Mozilla Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes