Requests a yes/no choice from the user.

Confirm dialogConfirm dialog

Dialog inputs

NameTypeDefault valueDescription
titlestringConfirmIt will be placed in the dialog title section.
yesLabelstringyesIt will be placed first in the dialog action section
noLabelstringnoIt will be placed last in the dialog action section
thirdOptionLabel (optional)stringIt is not a mandatory input. it will be rendered in between yes and no label
messagestringDo you want to proceed?It will be rendered in the dialog content area
htmlContenthtmlIt will be rendered in the dialog content area

note: if input is not passed, default value will be rendered

Basic Usage

constructor(private dialog: MatDialog) {}

...

let files = [
    // Files defined here...
];

const dialogRef = this.dialog.open(ConfirmDialogComponent, {
    data: {
        title: 'Upload',
        message: `Are you sure you want to upload ${files.length} file(s)?`
    },
    minWidth: '250px'
});

dialogRef.afterClosed().subscribe((result) => {
    if (result === true) {
        event.resumeUpload();
    }
});

Rendering custom html body

It is possible now to render a custom html instead of a plain message as confirm body via the attribute htmlContent. The html will be sanitized and then showed.

constructor(private dialog: MatDialog) {}

...

let files = [
    // Files defined here...
];

const dialogRef = this.dialog.open(ConfirmDialogComponent, {
    data: {
        title: 'Upload',
        htmlContent: '<div> <p>A</p> <p>Custom</p> <p>Content</p> </div>'
    },
    minWidth: '250px'
});

dialogRef.afterClosed().subscribe((result) => {
    if (result === true) {
        event.resumeUpload();
    }
});

Rendering with thirdOptionLabel

       const thirdOptionLabel = "YES. DON'T SHOW IT AGAIN";
       const dialog =  this.dialog.open(ConfirmDialogComponent, {
            data: {
                title: 'Upload',
                thirdOptionLabel: thirdOptionLabel,
                message: `This is the default message`
            },
            minWidth: '250px'
        });
       dialog.afterClosed().subscribe((status) => {
           // do the third option label operation
           if ( status === thirdOptionLabel) {
               // console.log('third option clicked');
           }
       });

Details

This component lets the user make a yes/no choice to confirm an action. Use the Angular MatDialog service to open the dialog, as shown in the example, and pass a data object with properties for the title and message to show. The afterClosed event of the MatDialog gives you the user's choice via the result parameter.

© 2023 Alfresco Software, Inc. All Rights Reserved.