Starts in:
2 DAYS
3 HRS
56 MIN
59 SEC
Starts in:
2 D
3 H
56 M
59 S

Page Alerts

A page alert is useful for displaying an important message to the user. The ABP 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

Render HTML content

We can pass html content to the title and message parameters

  • It allows static message or localization key
  • abpSafeHtml pipe will sanitize html values
this.service.show({
  type: 'success',
  title: `New <i><u>blog</u></i> published`,
  message: 'AbpApp::HtmlMessageWithParams{0}',
  messageLocalizationParams: ['admin'],
});

angular-page-alert-with-html-example

Contributors


Last updated: July 31, 2024 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

What’s New with .NET 9 & ABP 9?

21 Nov, 17:00
Online
Watch the Event
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