Give your modals URL address with Auxiliary Routes in Angular
Netanel Basal

Hey, I finally found a solution to my problem (modal not working in a child component and child route).
I’m not using this function anymore:
this.router.navigate([{outlets: {modal: null}}]);
I replaced it by:

I just added a variable to change manually the path for each modal, with [urlOnClose]=”/newPath”.
It both works with or without outlet.
Not sure if it’s the best solution, but that’s what I’ve found so far

Modal Component Template:
<div class=”modal-container”>
 <div class=”modal”>
 <ng-content select=”[modal-content]”></ng-content>
 <div class=”modal-overlay” (click)=”closeModal(urlOnClose)”></div>

Modal Component Class:
export class ModalComponent {
 @Output() modalClose : EventEmitter<any> = new EventEmitter<any>();
 @Input() urlOnClose:string;
 constructor( private router : Router ) {}

closeModal($event) {

Modal call:
<app-modal (modalClose)=”modalClose($event)” #modal=”modal” [urlOnClose]=’/path’>
 <div modal-content>
 <button (click)=”modal.closeModal(save())”>Submit</button>

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.