How to close Material Dialog after click a button-CodePudding

This is the code of my dialog :

<ul class="list-group">
            <li class="list-group-item" *ngFor="let area of data.arregloAreas[data.index].listo">
                <button class="btn btn-primary" [routerLink]="['/vertrabajadores', area]"><span class="fa fa-arrow-right"></span> </button> {{area | titlecase}}
            </li>
            <li class="list-group-item" style="color: red;" *ngIf="data.arregloAreas[data.index].listo.length == 0">
                No existen áreas completas
            </li>
        </ul>

Everything works fine, I can navigate without problem. But when it changes the page, the dialog persists over the page, so I have to click outside in order to close it. My idea is when I click the button that contains the routerLink, close the dialog immediately.

I think I can put a (click) method in the navigate button but I don't know any method to close the dialog.

EDIT: code of dialog.ts

import { Component, OnInit, Inject } from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'app-dashboarddialog',
  templateUrl: './dashboarddialog.component.html',
  styleUrls: ['./dashboarddialog.component.css']
})
export class DashboarddialogComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    console.log(data.arregloAreas)  
  }

  ngOnInit(): void {
  }

  

}

CodePudding user response：

import { Component, OnInit, Inject } from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';

@Component({
  selector: 'app-dashboarddialog',
  templateUrl: './dashboarddialog.component.html',
  styleUrls: ['./dashboarddialog.component.css']
})
export class DashboarddialogComponent implements OnInit {

  constructor(
    private dialogRef: MatDialogRef,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    console.log(data.arregloAreas)  
  }

  ngOnInit(): void {
  }

  closeModal() {
    this.dialogRef.close();
  }
}

<button class="btn btn-primary" (click)="closeModal()" [routerLink]="['/vertrabajadores', area]"><span class="fa fa-arrow-right"></span> </button>

CodePudding user response：

In the usual cases, there would be a MatDialogRef and a const assigned for the same, say dialogRef.

Now, you can write as dialogRef.close() in the (click) function of the function.