Notifications

Show notifications within your angular app.

We created a NotificationTemplateComponent which is defined in the Shared module to encapsulate the logic and markup of this notification component.

To display the notifications we use the Material SnackBar component.

In src/app/utilities/notifications/notifications.component.html you can find some of the different notifications you can create using this NotificationTemplateComponent.

You can pass the following options to the notifications component:

showNotification(vpos, hpos, type, icon = ''): void {
  // for more info about Angular Material snackBar check: https://material.angular.io/components/snack-bar/overview
  this.mySnackBarRef = this.snackBar.openFromComponent(NotificationTemplateComponent, {
     data: {
       message: 'This is a nice notification positioned in the ' + vpos + ' ' + hpos,
       icon,
       type,
       dismissible: true
       // you can add everything you want here
     },
     duration: 2000,
     horizontalPosition: hpos, // 'start' | 'center' | 'end' | 'left' | 'right'
     verticalPosition: vpos, // 'top' | 'bottom'
     panelClass: ['notification-wrapper']
  });
  // this is to be able to close it from the NotificationComponent
  this.mySnackBarRef.instance.snackBarRef = this.mySnackBarRef;
}

app notifications