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

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.

    (click)="show()"

show() {
      //do something
}