CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
JavierOrellana7
JavierOrellana7

Reputation: 59

How to close Material Dialog after click a button

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 {
  }

  

}

Upvotes: 1

Views: 4043

Answers (1)

vsnikhilvs
vsnikhilvs

Reputation: 576

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>

Upvotes: 2

Related Questions