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

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

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

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

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