Merge pull request #7171 from abpframework/feat/7166

docs: add documentation for page alerts

docs/en/UI/Angular/Page-Alerts.md

@@ -0,0 +1,64 @@
+# 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](./images/page-alert-warning-example.png)
+
+You can simply import `PageAlertService` from `@abp/ng.theme.shared` and utilize it as follows:
+
+```typescript
+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`
+
+```typescript
+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)
+
+

docs/en/docs-nav.json

@@ -822,6 +822,10 @@
                 {
                   "text": "Toast Overlay",
                   "path": "UI/Angular/Toaster-Service.md"
+                },
+                {
+                  "text": "Page Alerts",
+                  "path": "UI/Angular/Page-Alerts.md"
                 }
               ]
             },