Easily manage application dialogs with Angular

Introduction

Managing dialogs, modals, and other floating UI elements in any application can be a challenging task. To solve this problem, we need a centralized and robust way to work. The DialogService from the turbogui-angular library for Angular provides a comprehensive solution for handling various types of dialogs, busy states, and notifications in a clean and consistent way. In this tutorial, we'll explore how to effectively use the basics of this service in your Angular applications.

Table of Contents

  1. Installation
  2. Setting Up
  3. Basic Dialog Management
  4. Modal Busy States
  5. Snackbar Notifications
  6. Date Selection Dialogs
  7. Advanced Features
  8. Best Practices

Installation

First, install the turbogui-angular package into your project as a dependency using npm:

npm install turbogui-angular

The DialogService is provided at the root level, so no additional module imports are needed. However, make sure you have the required dependencies installed:

Setting Up

Simply inject the DialogService into your components:

import { DialogService } from 'turbogui-angular';

@Component({
  // ...
})

export class YourComponent {

  constructor(private dialogService: DialogService) {

  }
}

Basic Dialog Management

Creating a Simple Dialog

The addDialog() method is your primary tool for creating dialogs. Here's a basic example:

this.dialogService.addDialog(DialogTwoOptionComponent, {
  width: '50%',
  texts: ['Dialog Title', 'Subtitle'],
  options: ['OK', 'Cancel'],
  modal: true
}, (selection) => {

  if (selection.index === 0) {

    console.log('User clicked OK');

  } else if (selection.index === 1) {

    console.log('User clicked Cancel');
  }
});

The first method parameter receives the class for the dialog we want to show. There are several predefined, and we can create our custom ones by extending DialogBaseComponent

The second parameter, properties object, accepts several configuration options:

Modal Busy States

When performing async operations, you can show a busy state that blocks user interaction for the whole application:

async performLongOperation() {

  this.dialogService.addModalBusyState();

  try {

    await this.someAsyncOperation();

  } finally {

    this.dialogService.removeModalBusyState();
  }
}

Custom Busy State Component

You can customize the busy state appearance by extending the BusyStateBaseComponent from turbogui-angular:

import { BusyStateBaseComponent } from 'turbogui-angular';

@Component({
  selector: 'custom-busy-state',
  template: `
    <div class="custom-spinner">
      <mat-spinner></mat-spinner>
      <h2>Processing...</h2>
    </div>
  `
})

export class CustomBusyStateComponent extends BusyStateBaseComponent {}

// In your app component or module
constructor(private dialogService: DialogService) {

  this.dialogService.customBusyStateComponentClass = CustomBusyStateComponent;
}

Snackbar Notifications

Simple Snackbar

Show temporary notifications with optional actions:

this.dialogService.addSnackBar(
  {
    duration: 3000,
    verticalPosition: 'bottom',
    horizontalPosition: 'center'
  },
  'Operation completed successfully',
  'UNDO',
  () => {
    // Handle undo action
  }
);

Managing Snackbars

Only one snackbar can be shown at a time:

if (this.dialogService.isShowingSnackBar) {

  this.dialogService.removeSnackBar();
}

Date Selection Dialogs

The service provides a specialized dialog for date selection:

this.dialogService.addDateSelectionDialog({
  title: 'Select Delivery Date',
  width: '400px',
  modal: true
}, (selectedDate) => {

  if (selectedDate) {

    console.log('Selected date:', selectedDate);
  }
});

Advanced Features

Application Close Warning

Add a warning when users try to close the application:

// Enable warning
this.dialogService.addCloseApplicationWarning();

// Remove warning when needed
this.dialogService.removeCloseApplicationWarning();

Managing Multiple Dialogs

You can check for active dialogs and remove them all if needed:

// Remove all active dialogs
this.dialogService.removeAllDialogs();

Enabling/Disabling Dialog Service

Control the entire service:

// Disable all dialog features
this.dialogService.isEnabled = false;

// Re-enable dialog features
this.dialogService.isEnabled = true;

Best Practices

Error Handling: Always remove busy states in a finally block:

try {

  this.dialogService.addModalBusyState();
  await this.riskyOperation();

} finally {

  this.dialogService.removeModalBusyState();
}

Modal vs Non-Modal: Choose carefully between modal and non-modal dialogs:

// Critical decision
this.dialogService.addDialog(ConfirmationDialog, {
  modal: true,
  texts: ['Delete Account', 'This action cannot be undone']
});

// Information
this.dialogService.addDialog(InfoDialog, {
  modal: false,
  texts: ['New Features Available']
});

Responsive Design: Always specify maxWidth for better mobile experience:

this.dialogService.addDialog(YourDialog, {
  width: '500px',
  maxWidth: '96vw'  // Ensures dialog fits on mobile
});

Clean Up: Remove dialogs when component is destroyed:

ngOnDestroy() {
  this.dialogService.removeAllDialogs();
}

Dependencies

The turbogui-angular library depends on:

Make sure these dependencies are properly installed in your project.

Conclusion

The DialogService from turbogui-angular provides a robust solution for managing dialogs in Angular applications. By following this guide and best practices, you can create a consistent and user-friendly dialog system that handles everything from simple notifications to complex modal interactions. Remember to: