alfresco-ng2-components/docs/core/dialogs/dialog.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Dialog component	v6.10.0	Active	2024-05-24

Dialog component

Dialog wrapper styled according to a consistent design system.

Dialog views

Large size and Medium

Looks the same but have different sizes. Max-width for Large dialog is 1075px; Max-width for Medium dialog is 778px;

Alert dialogs

Standard:

With icon:

Dialog with additional buttons

Basic Usage

<ng-template #contentDialogTemplate>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique nihil, natus corrupti asperiores voluptas, incidunt veritatis.
</ng-template>

<ng-template #actionsDialogTemplate>
  <button mat-button>
    Reset
  </button>

  <button mat-button>
    Clean
  </button>
</ng-template>

@ViewChild('contentDialogTemplate') contentDialogTemplate: TemplateRef<any>;
@ViewChild('actionsDialogTemplate') actionsDialogTemplate: TemplateRef<any>;

constructor(private dialog: MatDialog) {}

//...

function openDialog() {
    const data: DialogData = {
        title: 'Dialog title',
        dialogSize: DialogSize.Alert,
        isConfirmButtonDisabled$: of(false),
        contentTemplate: this.contentDialogTemplate, // or  contentComponent: this.contentDialogTemplate
        additionalActionButtons: [{
            title: 'Reset',
            class: 'reset-button',
            onClick: () => {
                this.isConfirmButtonDisabled$.next(true);
            }
        }] // or actionsTemplate: this.actionsDialogTemplate
    };

    this.dialog.open(DialogComponent, { data }, width: '600px');
}

To use dialog with provided component as a content componentData should be passed as data parameter. Inside component DIALOG_COMPONENT_DATA should be injected.

//...

function openDialog() {
    const data: DialogData = {
        title: 'Dialog title',
        contentComponent: ExampleDialogComponent,
        componentData: { nodeId: 'nodeId', name: 'node name' } // any data can be passed
        dataOnConfirm$: of({ nodeId, data: {} })
    };

    const dialogInstance = this.dialog.open(DialogComponent, { data });

    dialogInstance.afterClosed().subscribe((data) => data) // data = { nodeId, data: {} }
}

in ExampleDialogComponent:

export class ManageHoldsDialogComponent {
    inputs = inject(DIALOG_COMPONENT_DATA); // inputs = { nodeId: 'nodeId',  name: 'node name' }
}

Note that fixed width may be provided which will work correctly on smaller screens. But don't specify any values ​​for height, as this may break the scrollable content and hide the buttons. To display the design well, it is necessary to provide no more than 2 additional buttons.

Details

This component lets the user reuse styled dialog wrapper. Use the Angular MatDialog service to open the dialog, as shown in the example, and pass a data object with properties.

See also

• Dialog Data Interface
• Dialog Model
• AdditionalDialogActionButton Interface