Forked from sannonaragao/About-the-notification-component.txt
Created
October 22, 2019 04:18
-
-
Save iamsank8/138dff7dd024c985fff7b8961fb3d4b7 to your computer and use it in GitHub Desktop.
Use PrimeNG Message and Growl as a global service of the application.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
PrimeNG has 2 different components to display messages: | |
The Messages component: https://www.primefaces.org/primeng/#/messages | |
The Growl component: https://www.primefaces.org/primeng/#/growl | |
notifications.component.ts - is the notification component with both growl and services from PrimeNg: | |
<p-growl [value]="growl"></p-growl> | |
<p-messages [value]="message"></p-messages> | |
notifications.service.ts - is the service to be used to send messages do Growl and Messages. | |
top-component.html - is a top component of your application where you normally would put the p-messages. | |
top-module.ts - is a top module to declare the component and provide the notification service. | |
where-to-use-component.ts - is some component where you want to call the notification service. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, OnInit, OnDestroy } from '@angular/core'; | |
import { Message } from 'primeng/primeng'; | |
import { NotificationsService } from '@wheels/shared/notifications/notifications.service'; | |
import { Subscription } from 'rxjs/Subscription'; | |
@Component({ | |
selector: 'app-notifications', | |
template: ` <p-growl [sticky]="false" life="3000" [value]="growl"></p-growl> | |
<p-messages [value]="message"></p-messages>` | |
}) | |
export class NotificationsComponent implements OnInit, OnDestroy { | |
growl: Message[] = []; | |
message: Message[] = []; | |
growlSubscription: Subscription; | |
messageSubscription: Subscription; | |
constructor(private notificationsService: NotificationsService) { } | |
ngOnInit() { | |
this.subscribeToGrowlNotifications(); | |
this.subscribeToMessageNotifications(); | |
} | |
subscribeToGrowlNotifications() { | |
this.growlSubscription = this.notificationsService.growlNotificationChange | |
.subscribe(notification => { | |
this.growl.push(notification); | |
setTimeout(() => { | |
this.growl.splice(this.growl.indexOf(notification), 1); | |
}, 3000); | |
}); | |
} | |
subscribeToMessageNotifications() { | |
this.messageSubscription = this.notificationsService.messageNotificationChange | |
.subscribe(( notification: Message[]) => { | |
this.message.length = 0; | |
if ( notification !== undefined) { | |
notification.forEach(element => { | |
this.message.push(element); | |
}); | |
} | |
}); | |
} | |
ngOnDestroy() { | |
this.growlSubscription.unsubscribe(); | |
this.messageSubscription.unsubscribe(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable } from '@angular/core'; | |
import { Subject } from 'rxjs/Subject'; | |
import { Message } from 'primeng/primeng'; | |
type Severities = 'success' | 'info' | 'warn' | 'error'; | |
@Injectable() | |
export class NotificationsService { | |
growlNotificationChange: Subject<Object> = new Subject<Object>(); | |
messageNotificationChange: Subject<Object> = new Subject<Object>(); | |
private message: Message[] = []; | |
messageNotifyNow() { | |
this.messageNotificationChange.next(this.message); | |
this.message = []; | |
} | |
notificationClear() { | |
this.message = []; | |
this.messageNotifyNow(); | |
} | |
growlNotify(severity: Severities, summary: string, detail: string) { | |
this.growlNotificationChange.next({ severity, summary, detail }); | |
} | |
messageNotify(severity: Severities, summary: string, detail: string) { | |
this.messageNotificationChange.next({ severity, summary, detail }); | |
} | |
addNotification(severity: Severities, summary: string, detail: string) { | |
this.message.push({ severity, summary, detail }); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<app-notifications></app-notifications> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
import { GrowlModule, MessagesModule } from 'primeng/primeng'; | |
import { NotificationsService } from '@wheels/shared/notifications/notifications.service'; | |
import { NotificationsComponent } from '@wheels/shared/notifications/notifications.component'; | |
... | |
@NgModule({ | |
imports: [... | |
GrowlModule, | |
MessagesModule, | |
...], | |
declarations: [... | |
NotificationsComponent, | |
...],... | |
providers: [... | |
NotificationsService, | |
...] | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
import { NotificationsService } from '@wheels/shared/notifications/notifications.service'; | |
... | |
constructor( private notificationsService: NotificationsService ) { } | |
ngOnInit(): void { | |
this.notificationsService.growlNotify('info', 'Growl Test', 'Growl was called!'); | |
this.notificationsService.messageNotify('info', 'Message Test', 'Message was called!'); | |
// You can add multiple messages to be show in the Message component at once. | |
this.notificationsService.addNotification('warn', 'Fatal error. Contact support', 'Test 1'); | |
this.notificationsService.addNotification('error', 'Fatal error. Contact support', 'Test 2'); | |
this.notificationsService.messageNotifyNow(); | |
} | |
... | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment