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

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:
this.router.navigateByUrl(this.urlOnClose);

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>
 <div class=”modal-overlay” (click)=”closeModal(urlOnClose)”></div>
</div>

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

closeModal($event) {
 this.router.navigateByUrl(this.urlOnClose);
 this.modalClose.next($event);
 }
}

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

One clap, two clap, three clap, forty?

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