How can i display a dialog before opening a component with Angular and Angular material?

I have 2 components, the first component contains a button onclick route to the second component. I want to display a popup or a dialog in opening this second component.

how can i do this !

I work with Angular 8 and Angular material.

CodePudding user response：

It's OK i found solution

just I Tried this and it's worked fine

in the second component i added :

import { MatDialog } from '@angular/material';
import { DialogComponent } from '../../dialog-video/dialog.component';

//... other lines
    
constructor(public dialog: MatDialog) {} 
   
  ngAfterViewInit() {
    this.dialog.open(DialogComponent);
  }

CodePudding user response：

import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { Router } from '@angular/router';

constructor(private modalService: BsModalService,
            private router: Router) { }

clickToShowComponent() {
  this.bsModalRef = this.modalService.show(SecondComponent);
  this.secondComponentSubscription = this.modalService.onHide.subscribe((routeToSecondComponent: any) => {
    if(routeToSecondComponent) {
       this.router.navigate(['/secondComponentRoute']);
    }
    this.secondComponentSubscription.unsubscribe();
  });
}