mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
657e5ef7fd
* Generate docs * Fix duplicated Optional and restore code block ticks * Fix docbuild command errors, improve documentations --------- Co-authored-by: Amedeo Lepore <amedeo.lepore85@gmail.com> Co-authored-by: Amedeo Lepore <amedeo.lepore@hyland.com>
164 lines
8.1 KiB
Markdown
164 lines
8.1 KiB
Markdown
---
|
|
Title: Notification Service
|
|
Added: v2.0.0
|
|
Status: Active
|
|
Last reviewed: 2018-06-08
|
|
---
|
|
|
|
# [Notification Service](../../../lib/core/src/lib/notifications/services/notification.service.ts "Defined in notification.service.ts")
|
|
|
|
Shows a notification message with optional feedback.
|
|
|
|
|
|
|
|
## Class members
|
|
|
|
### Methods
|
|
|
|
- **dismissSnackMessageAction**()<br/>
|
|
dismiss the notification snackbar
|
|
- **openSnackMessage**(message: `string`, config?: `number|MatSnackBarConfig<Omit<SnackBarData,"actionLabel"|"message">>`, interpolateArgs?: `any`): [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>`<br/>
|
|
Opens a SnackBar notification to show a message.
|
|
- _message:_ `string` - The message (or resource key) to show.
|
|
- _config:_ `number|MatSnackBarConfig<Omit<SnackBarData,"actionLabel"|"message">>` - (Optional) Time before notification disappears after being shown or MatSnackBarConfig object
|
|
- _interpolateArgs:_ `any` - (Optional) The interpolation parameters to add for the translation
|
|
- **Returns** [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>` - Information/control object for the SnackBar
|
|
- **openSnackMessageAction**(message: `string`, action: `string`, config?: `number|MatSnackBarConfig<Omit<SnackBarData,"actionLabel"|"message">>`, interpolateArgs?: `any`): [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>`<br/>
|
|
Opens a SnackBar notification with a message and a response button.
|
|
- _message:_ `string` - The message (or resource key) to show.
|
|
- _action:_ `string` - Caption for the response button
|
|
- _config:_ `number|MatSnackBarConfig<Omit<SnackBarData,"actionLabel"|"message">>` - (Optional) Time before notification disappears after being shown or MatSnackBarConfig object
|
|
- _interpolateArgs:_ `any` - (Optional) The interpolation parameters to add for the translation
|
|
- **Returns** [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>` - Information/control object for the SnackBar
|
|
- **pushToNotificationHistory**(notification: [`NotificationModel`](../../../lib/core/src/lib/notifications/models/notification.model.ts))<br/>
|
|
Push new notification to Notification History
|
|
- _notification:_ [`NotificationModel`](../../../lib/core/src/lib/notifications/models/notification.model.ts) - Notification model to be pushed.
|
|
- **showError**(message: `string`, action?: `string`, interpolateArgs?: `any`, showAction: `boolean` = `true`): [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>`<br/>
|
|
Rase error message
|
|
- _message:_ `string` - Text message or translation key for the message.
|
|
- _action:_ `string` - (Optional) Action name
|
|
- _interpolateArgs:_ `any` - (Optional) The interpolation parameters to add for the translation
|
|
- _showAction:_ `boolean` - True if action should be visible, false if not. Default: true.
|
|
- **Returns** [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>` -
|
|
- **showInfo**(message: `string`, action?: `string`, interpolateArgs?: `any`, showAction: `boolean` = `true`): [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>`<br/>
|
|
Rase info message
|
|
- _message:_ `string` - Text message or translation key for the message.
|
|
- _action:_ `string` - (Optional) Action name
|
|
- _interpolateArgs:_ `any` - (Optional) The interpolation parameters to add for the translation
|
|
- _showAction:_ `boolean` - True if action should be visible, false if not. Default: true.
|
|
- **Returns** [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>` -
|
|
- **showWarning**(message: `string`, action?: `string`, interpolateArgs?: `any`, showAction: `boolean` = `true`): [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>`<br/>
|
|
Rase warning message
|
|
- _message:_ `string` - Text message or translation key for the message.
|
|
- _action:_ `string` - (Optional) Action name
|
|
- _interpolateArgs:_ `any` - (Optional) The interpolation parameters to add for the translation
|
|
- _showAction:_ `boolean` - True if action should be visible, false if not. Default: true.
|
|
- **Returns** [`MatSnackBarRef`](https://material.angular.io/components/snack-bar/overview)`<any>` -
|
|
|
|
## Details
|
|
|
|
The [Notification Service](notification.service.md) is implemented on top of the Angular Material Design snackbar.
|
|
Use this service to show a notification message, and optionally get feedback from it.
|
|
|
|
```ts
|
|
import { NotificationService } from '@alfresco/adf-core';
|
|
|
|
export class MyComponent implements OnInit {
|
|
|
|
constructor(private notificationService: NotificationService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.notificationService
|
|
.openSnackMessage('test', 200000)
|
|
.afterDismissed()
|
|
.subscribe(() => {
|
|
console.log('The snack-bar was dismissed');
|
|
});
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts
|
|
import { NotificationService } from '@alfresco/adf-core';
|
|
|
|
export class MyComponent implements OnInit {
|
|
|
|
constructor(private notificationService: NotificationService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.notificationService
|
|
.openSnackMessageAction('Do you want to report this issue?', 'send', 200000)
|
|
.afterDismissed()
|
|
.subscribe(() => {
|
|
console.log('The snack-bar was dismissed');
|
|
});
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts
|
|
import { NotificationService } from '@alfresco/adf-core';
|
|
import { MatSnackBarConfig } from '@angular/material/snackbar';
|
|
|
|
export class MyComponent implements OnInit {
|
|
|
|
snackBarConfig: MatSnackBarConfig = new MatSnackBarConfig();
|
|
|
|
constructor(private notificationService: NotificationService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.notificationService
|
|
.openSnackMessageAction('Do you want to report this issue?', 'send', snackBarConfig)
|
|
.afterDismissed()
|
|
.subscribe(() => {
|
|
console.log('The snack-bar was dismissed');
|
|
});
|
|
}
|
|
}
|
|
```
|
|
|
|
By providing a `decorativeIcon` property in the [`SnackBarData`](../../../lib/core/src/lib/snackbar-content/snack-bar-data.ts), it is possible to render a decorative
|
|
[`MaterialIcon`](https://material.angular.io/components/icon/overview#interactive-icons) to the left of the message.
|
|
|
|
```ts
|
|
import { NotificationService } from '@alfresco/adf-core';
|
|
import { MatSnackBarConfig } from '@angular/material/snackbar';
|
|
|
|
export class MyComponent implements OnInit {
|
|
|
|
snackBarConfig: MatSnackBarConfig = new MatSnackBarConfig();
|
|
|
|
constructor(private notificationService: NotificationService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.snackBarConfig.data = { decorativeIcon: 'folder' };
|
|
this.notificationService
|
|
.openSnackMessageAction('Do you want to report this issue?', 'send', snackBarConfig)
|
|
.afterDismissed()
|
|
.subscribe(() => {
|
|
console.log('The snack-bar was dismissed');
|
|
});
|
|
}
|
|
}
|
|
```
|
|
|
|
The default message duration is 5000 ms that is used only if you don't pass a custom duration in the parameters of openSnackMessageAction/openSnackMessage methods.
|
|
You can also change the default 5000 ms adding the following configuration in the app.config.json:
|
|
|
|
```json
|
|
"notificationDefaultDuration" : "7000"
|
|
```
|
|
|
|
#### Notification types
|
|
|
|
| Name | Description |
|
|
| ---- | ----------- |
|
|
| info | To notify messages. It will be displayed with an info icon next to it. |
|
|
| warn | To notify warning messages. It will be displayed with a warning icon next to it. |
|
|
| error | To notify errors. It will be displayed with an error icon next to it. |
|
|
| recursive | To notify recursive messages. If a message is prompt to duplicate an existing notification and you don't want to overload the [notification history component](../../core/components/notification-history.component.md) with the same message use the recursive type. I.e. notifications coming from an API call that are triggered every time a component is initialized. It will be displayed with an info icon next to it. |
|