alfresco-ng2-components/docs/core/services/notification.service.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Notification Service	v2.0.0	Active	2018-06-08

Notification Service

Shows a notification message with optional feedback.

Class members

Methods

• dismissSnackMessageAction()
  dismiss the notification snackbar
• openSnackMessage(message: string, config?: number|MatSnackBarConfig<Omit<SnackBarData,"actionLabel"|"message">>, interpolateArgs?: any): MatSnackBarRef<any>
  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<any> - Information/control object for the SnackBar
• openSnackMessageAction(message: string, action: string, config?: number|MatSnackBarConfig<Omit<SnackBarData,"actionLabel"|"message">>, interpolateArgs?: any): MatSnackBarRef<any>
  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<any> - Information/control object for the SnackBar
• pushToNotificationHistory(notification: NotificationModel)
  Push new notification to Notification History
  • notification: NotificationModel - Notification model to be pushed.
• showError(message: string, action?: string, interpolateArgs?: any, showAction: boolean = true): MatSnackBarRef<any>
  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<any> -
• showInfo(message: string, action?: string, interpolateArgs?: any, showAction: boolean = true): MatSnackBarRef<any>
  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<any> -
• showWarning(message: string, action?: string, interpolateArgs?: any, showAction: boolean = true): MatSnackBarRef<any>
  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<any> -

Details

The Notification Service is implemented on top of the Angular Material Design snackbar. Use this service to show a notification message, and optionally get feedback from it.

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');
            });
    }
}

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');
            });
    }
}

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, it is possible to render a decorative MaterialIcon to the left of the message.

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:

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