Page Alerts

A page alert is useful for displaying an important message to the user. The ABP Framework provides an easy way to show the following alert to the user.

angular-page-alert-example

You can simply import PageAlertService from @abp/ng.theme.shared and utilize it as follows:

import { PageAlertService } from '@abp/ng.theme.shared';

@Component({
  // ...
})
export class MyComponent {
  constructor(private service: PageAlertService) {}

  showWarning() {
    this.service.show({
      type: 'warning',
      message:
        'We will have a service interruption between 02:00 AM and 04:00 AM at October 23, 2023!',
      title: 'Service Interruption',
    });
  }
}

SHOW

The method show accepts a single object that is type of PageAlert

export interface PageAlert {
  type: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
  message: string;
  title?: string;
  dismissible?: boolean;
  messageLocalizationParams?: string[];
  titleLocalizationParams?: string[];
}
  • type (Required): Defines what type of alert will be shown
  • message (Required): The message who will be shown, also works with localization as well.
  • title (Optional): The title of the message. If it is not provided, the title will be hidden.
  • dismissible (Optional): Default is true. If enabled, a button on the top right corner will be shown to the users so that they can dismiss the message.
  • messageLocalizationParams and titleLocalizationParams (Optional): If the message and/or the title is a key for localization service and contains some parameters, these fields could be used to pass those parameters.

An example with Localization

this.service.show({
  type: 'danger',
  message: 'AbpAccount::PagerInfo{0}{1}{2}',
  messageLocalizationParams: ['10', '20', '30'],
  title: 'AbpAccount::EntityNotFoundErrorMessage',
  titleLocalizationParams: ['Test', 'id123'],
});

angular-page-alert-with-params-example

Contributors


Last updated: January 18, 2021 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Building Modular Monolith Applications Using .Net and ABP Framework

17 Oct, 20:00
Online
Register Now
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More