What do I want?

I want to destroy Modals containing my Angular components to be closed and destroyed so it does produce side-effects when I am changing routes (For example using the browser back button).

Actual Results

When changing routes using my app's Navbar, either the Modal stays in the DOM and I am not able to scroll anything on the screen or The Modal simply does not close.

Artifacts such as which should be removed when we close the modal are still present.

I have tried using

1. UIkit.modal(myModalId).$destroy(true) to remove the modal from dom.
2. Jquery $(modalId).remove(); Modal removed from DOM but when we go back to the modal page, the Buttons are not triggering the modals.

My Code

Button that Opens Modal

<button uk-toggle="target: #myModalId">Open Modal</button>

Modal template

<div id="myModalId" class="uk-flex-top acc-modal" uk-modal="esc-close: false; bg-close: false; stacked: true; cls-page: 'acc-modal-page';">
        <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" style="width: 431.6px !important; ">
            <button class="uk-modal-close-default uk-close-large" type="button" id="close-event" uk-close></button>
            <h2 class="uk-modal-title">
                Modal Title</h2>
            <My-Child-Component (newItemEvent)="updateDataAfterChild($event)" #MyChildComponent></My-Child-Component>
        </div>
    </div>

Hide and Destroy modal when route component destroys.

 destroyModal(modalId: string){
    const modal = uikit.modal(modalId);
    modal.hide();
    modal.$destroy(true);
 }

  ngOnDestroy(){
    try{
      this.destroyModal('#'+myModalId);
    }catch(err){
      console.log(err);
    }
  }