---
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. |