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

UIkit.modal(myModalId).$destroy(true) to remove the modal from dom.
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);
    }
  }

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T05:52:33.601Z

Use routerLink and <router-outlet></router-outlet>.

You can do something like this.


<button mat-flat-button color="primary" routerLink="/login">Login</button>
<button mat-flat-button color="primary" routerLink="/signup">Signup</button>

<router-outlet></router-outlet>

Your Components will show in place of <router-outlet></router-outlet> and they will destroy previous component. [Source]

Thoughts: I believe this way of routing is done because of the 'nature' of the Single Page Applications.

0

305

Uikit Modal not destroying when route is changed (Angular)