docs: add Toaster-Service.md

docs/en/UI/Angular/Confirmation-Service.md

@@ -1,4 +1,4 @@
-# ConfirmationService
+# Confirmation Popup
 
 You can use the `ConfirmationService` in @abp/ng.theme.shared package to display a confirmation popup by placing at the root level in your project.
 
@@ -160,5 +160,4 @@ clear(
 
 ## What's Next?
 
-- ToasterService 
+- [Toast Overlay](./Toaster-Service.md)
-<!-- TODO: Add ToasterService link -->

docs/en/UI/Angular/Permission-Management.md

@@ -76,4 +76,4 @@ Granted Policies are stored in the `auth` property of `ConfigState`.
 
 ## What's Next?
 
-* [Config State](./Config-State.md)
+- [Confirmation Popup](./Confirmation-Service.md)

docs/en/UI/Angular/Toaster-Service.md

@@ -0,0 +1,157 @@
+# Toast Overlay
+
+You can use the `ToasterService` in @abp/ng.theme.shared package to display messages in an overlay by placing at the root level in your project.
+
+
+## Getting Started
+
+You do not have to provide the `ToasterService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
+
+
+```js
+import { ToasterService } from '@abp/ng.theme.shared';
+
+@Component({
+  /* class metadata here */
+})
+class DemoComponent {
+  constructor(private toaster: ToasterService) {}
+}
+```
+
+## Usage
+
+You can use the `success`, `warn`, `error`, and `info` methods of `ToasterService` to display an overlay.
+
+### How to Display a Toast Overlay
+
+```js
+this.toast.success('Message', 'Title')
+```
+
+- The `ToasterService` methods accept three parameters that are `message`, `title`, and `options`.
+- `success`, `warn`, `error`, and `info` methods return the id of opened toast overlay. The toast can be removed with this id.
+
+### How to Display a Toast Overlay With Given Options
+
+Options can be passed as the third parameter to `success`, `warn`, `error`, and `info` methods:
+
+```js
+import { Toaster, ToasterService } from '@abp/ng.theme.shared';
+//...
+
+constructor(private toaster: ToasterService) {}
+
+//...
+const options: Partial<Toaster.ToastOptions> = {
+    life: 10000,
+    sticky: false,
+    closable: true,
+    tapToDismiss: true,
+    messageLocalizationParams: ['Demo', '1'],
+    titleLocalizationParams: []
+  };
+
+  this.toaster.error('AbpUi::EntityNotFoundErrorMessage', 'AbpUi::Error', options);
+```
+
+- `life` option is the value in milliseconds that determines the closing time. Default value is `5000`
+- `sticky` option is the boolean value. If the value passed `true`, toast overlay keep on the screen by ignoring the life option. Default value is `false`
+- `closable` option is the boolean value that displays the close icon over the toast overlay or not. Default value is `true`.
+- `tapToDismiss` option is the boolean value that allows closing the toast overlay by clicking over. Default value is `false`.
+- `yesText` is the text of the confirm button. A localization key or localization object can be passed. Default value is `AbpUi::Yes`
+- `messageLocalizationParams` is the interpolation parameters of the message localization.
+- `titleLocalizationParams` is the interpolation parameters of the title localization.
+
+With the above options, the toast overlay looks like this:
+
+![toast](./images/toast.png)
+
+### How to Remove a Toast Overlay
+
+The open toast overlay can be removed manually via the `remove` method by passing the `id` of toast:
+
+```js
+const toastId = this.toast.success('Message', 'Title')
+
+this.toast.remove(toastId);
+```
+
+### How to Remove All Toasts
+
+The all open toasts can be removed manually via the `clear` method:
+
+```js
+this.toast.clear();
+```
+
+## API
+
+### success
+
+```js
+success(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Toaster.ToastOptions>,
+): number
+```
+
+- `Config` namespace can be imported from `@abp/ng.core`.
+- `Toaster` namespace can be imported from `@abp/ng.theme.shared`.
+
+> See the [`Config.LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46) and [`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts)
+
+
+### warn
+
+```js
+warn(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Toaster.ToastOptions>,
+): number
+```
+
+### error
+
+```js
+error(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Toaster.ToastOptions>,
+): number
+```
+
+### info
+
+```js
+info(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Toaster.ToastOptions>,
+): number
+```
+
+### remove
+
+```js
+remove(id: number): void
+```
+
+Removes an open toast by the given id.
+
+### clear
+
+```js
+clear(): void
+```
+
+Removes all open toasts.
+
+## See Also
+- [Confirmation Popup](./Confirmation-Service.md)
+
+## What's Next?
+
+- [Config State](./Config-State.md)

docs/en/docs-nav.json

@@ -337,6 +337,14 @@
               "text": "Permission Management",
               "path": "UI/Angular/Permission-Management.md"
             },
+            {
+              "text": "Confirmation Popup",
+              "path": "UI/Angular/Confirmation-Service.md"
+            },
+            {
+              "text": "Toast Overlay",
+              "path": "UI/Angular/Toaster-Service.md"
+            },
             {
               "text": "Config State",
               "path": "UI/Angular/Config-State.md"