-
-
Save sannonaragao/87bb8dcb72083acbef5f4094573adf79 to your computer and use it in GitHub Desktop.
| 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. | |
| 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(); | |
| } | |
| } |
| 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 }); | |
| } | |
| } |
| <app-notifications></app-notifications> |
| ... | |
| 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, | |
| ...] | |
| ... | |
| 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(); | |
| } | |
| ... | |
Good to know! Thank you for the feedback! :-) 👍
@sannonaragao @deepakparamesh : - Getting this error. Please suggest.
'app-notifications' is not a known element:
If 'app-notifications' is an Angular component, then verify that it is part of this module.
If 'app-notifications' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
Hello, what did you mean by 'top-component.html', because if it is the 'app.component.html' and you put the tag in there. If you try to use in other modules will not work. Right?
Sorry for my bad english
I have added this code(except app-notification) in shared module which is then used in 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.
Hey, thank you so much It helped a lot. lots of thanks
https://gist.github.com/sannonaragao/87bb8dcb72083acbef5f4094573adf79#gistcomment-3059220
I want to make it work, could you please help?
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.
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 :)
Hey, thank you so much It helped a lot. lots of thanks