```json
//[doc-seo]
{
    "Description": "Learn how to effectively display important messages to users using the ABP Framework's Page Alert feature with easy-to-follow examples."
}
```

# 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](./images/page-alert-warning-example.png)

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

```js
import { PageAlertService } from '@abp/ng.theme.shared';
import { inject } from '@angular/core';

@Component({
  // ...
})
export class MyComponent {
  private service = inject(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`

```js
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

```typescript
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](./images/page-alert-with-params-example.png)

## Render HTML content

We can pass html content to the `title` and `message` parameters


* It allows static message or localization key
* [abpSafeHtml](https://github.com/abpframework/abp/blob/37b59a7f05202264505d002397dbb27d275740e1/npm/ng-packs/packages/core/src/lib/pipes/safe-html.pipe.ts#L6) pipe will sanitize html values

```typescript
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](./images/page-alert-with-html-example.png)