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:
1
showNotification(vpos, hpos, type, icon = ''): void {
2
// for more info about Angular Material snackBar check: https://material.angular.io/components/snack-bar/overview
3
this.mySnackBarRef = this.snackBar.openFromComponent(NotificationTemplateComponent, {
4
data: {
5
message: 'This is a nice notification positioned in the ' + vpos + ' ' + hpos,
6
icon,
7
type,
8
dismissible: true
9
// you can add everything you want here
10
},
11
duration: 2000,
12
horizontalPosition: hpos, // 'start' | 'center' | 'end' | 'left' | 'right'
13
verticalPosition: vpos, // 'top' | 'bottom'
14
panelClass: ['notification-wrapper']
15
});
16
// this is to be able to close it from the NotificationComponent
17
this.mySnackBarRef.instance.snackBarRef = this.mySnackBarRef;
18
}
Copied!
app notifications
Last modified 1yr ago
Copy link