Comment on page


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:
this.mySnackBarRef = this.snackBar.openFromComponent(NotificationTemplateComponent, {
data: {
message: 'This is a nice notification positioned in the ' + vpos + ' ' + hpos,
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
Last modified 4yr ago