Angular 4 routers and modal dialogue

Question

I have an Angular 4 SPA application using an Angular router. I want to have a hyperlink that opens a component in a new dialog using Bootstrap 4. I already know how to open a modal dialog from a function.

But how to open it with a hyperlink?

<a [routerLink]="['/login']">Login</a> 

I want to leave my current component and show a modal dialog in front of it.

Another question - is it possible to do this programmatically? So i can

 this.router.navigate(['/login']); 

and the login mode is displayed above the current component?

Any suggestions?

Answer 1

My best guess: you can subscribe to an activated route and change the route parameters to start the modal.

 import { ActivatedRoute, Params } from '@angular/router'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'cmp1', templateUrl: './cmp1.component.html', styleUrls: ['./cmp1.component.css'], }) export class Cmp1 implements OnInit { constructor(private activatedRoute: ActivatedRoute) { } ngOnInit() { this.activatedRoute.params.subscribe(params => { if (params["modal"] == 'true') { // Launch Modal here } }); } } 

I suppose you will have a link that looks something like this: <a [routerLink]="['/yourroute', {modal: 'true'}]">

The best examples can be found here: Route Blog