The code snippet from the Angular Material repository related to the Dialog component reveals the use of an Injector for creating the Component that appears within the Dialog window. This method helps in avoiding circular dependencies as discussed on Stack Overflow.
Consequently, it seems that the warnings about potential circular dependencies are not accurate.
If needed, one can opt to disable these circular dependency warnings globally by tweaking the angular.json configuration file. Unfortunately, this adjustment cannot be applied at a per-file level.
angular.json
....
"defaults": {
....
"build": {
"showCircularDependencies": false
}
}
Workaround
To address scenarios where nested calls might occur, consider using the following approach. For instance, a Dialog belonging to type DialogYesNoComponent could launch another Dialog of type DialogWarningComponent, and vice versa.
Example
import { DialogService, DialogYesNoComponent, DialogWarningComponent } from '...'
export class TypeOne {
constructor(private dialog_service: DialogService) { }
// Method to prompt a yes/no dialog
showYesNoDialog() {
const dialog_question = "Would you like to continue?";
const dialog_ref: MatDialogRef<DialogYesNoComponent> =
this.dialog_service.open_yes_no_dialog({
question: dialog_question,
title: 'Confirm', height: '300px' })
dialog_ref.afterClosed().subscribe(
(choice: 'yes' | 'no') => {
if (choice === 'yes') {
// Continue with program logic
} else {
// Open Nested Warning Dialog
this.showWarningDialog("Stopping the program.");
}
}
)
}
// Display warning dialog
showWarningDialog(warning: String) {
...
}
}
DialogService
import { ElementRef, Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';
import { DialogWarningComponent } from './dialog-warning/dialog-warning.component';
import { DialogYesNoComponent } from './dialog-yes-no/dialog-yes-no.component';
@Injectable()
export class DialogService {
constructor(public dialog: MatDialog) { }
// Method to open a yes/no type dialog
public open_yes_no_dialog({ question, title = 'Confirm', yes_button_first = true,
has_backdrop = false, height = '250px', width = '350px' }:
{
question: string, title?: string, yes_button_first?: boolean, has_backdrop?: boolean,
height?: string, width?: string
}): MatDialogRef<DialogYesNoComponent> {
const dialog_ref = this.dialog.open(DialogYesNoComponent, {
autoFocus: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
closeOnNavigation: true,
disableClose: false,
hasBackdrop: has_backdrop,
height: height,
width: width,
data: { question: question, title: title, yes_button_first: yes_button_first }
})
return dialog_ref
}
// Method to display warning dialog
public open_warning_dialog() {
{ warning, title = 'Warning',
has_backdrop = false, height = '250px', width = '350px' }:
{
warning: string, title?: string, has_backdrop?: boolean,
height?: string, width?: string
}): MatDialogRef<DialogWarningComponent> {
const dialog_ref = this.dialog.open(DialogWarningComponent, {
autoFocus: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
closeOnNavigation: true,
disableClose: false,
hasBackdrop: has_backdrop,
height: height,
width: width,
data: { warning: warning, title: title }
})
return dialog_ref
}
}
DialogYesNoComponent
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export interface YesNoDialogOptions {
question: string
title: string
yes_button_first: boolean
}
@Component({
selector: 'dialog-yes-no',
templateUrl: './dialog-yes-no.component.html',
styleUrls: ['./dialog-yes-no.component.css']
})
export class DialogYesNoComponent {
constructor(public dialog_ref: MatDialogRef<DialogYesNoComponent>,
@Inject(MAT_DIALOG_DATA) public options: YesNoDialogOptions) { }
}
DialogWarningComponent
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export interface WarningDialogOptions {
warning: string
title: string
}
@Component({
selector: 'dialog-warning',
templateUrl: './dialog-warning.component.html',
styleUrls: ['./dialog-warning.component.css']
})
export class DialogWarningComponent {
constructor(public dialog_ref: MatDialogRef<DialogWarningComponent>,
@Inject(MAT_DIALOG_DATA) public options: WarningDialogOptions) { }
}