Last active
March 4, 2022 11:13
-
-
Save sannonaragao/87bb8dcb72083acbef5f4094573adf79 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(); | |
} | |
... | |
I have added this code(except
app-notification
) in a shared module which is then used in the app.module. I am also using routing in my application. It is not throwing any errors, but also not showing any messages or growl. Please help.Sankey, I added an example of how to use it in a shared module (my-shared-module.ts). Also make sure you have in some visible component.
Hey, I imported Component and NotificationService in app.component.module.ts file and it worked. Just needs to adjust the height, where growl is shown. Thanks :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sankey, I added an example of how to use it in a shared module (my-shared-module.ts). Also make sure you have in some visible component.