-
-
Save rekoch/e6cc1447186d446737e56a8fe3210869 to your computer and use it in GitHub Desktop.
Use primeNg GrowlModule globally through a 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
| <p-growl [value]="msgs"></p-growl> |
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 './notifications.service'; | |
| import { Subscription } from 'rxjs/Subscription'; | |
| @Component({ | |
| selector: 'app-notifications', | |
| templateUrl: './notifications.component.html', | |
| styleUrls: ['./notifications.component.css'] | |
| }) | |
| export class NotificationsComponent implements OnInit, OnDestroy { | |
| msgs: Message[] = []; | |
| subscription: Subscription; | |
| constructor(private notificationsService: NotificationsService) { } | |
| ngOnInit() { | |
| this.subscribeToNotifications(); | |
| } | |
| subscribeToNotifications() { | |
| this.subscription = this.notificationsService.notificationChange | |
| .subscribe(notification => { | |
| this.msgs.length = 0; | |
| this.msgs.push(notification); | |
| }); | |
| } | |
| ngOnDestroy() { | |
| this.subscription.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'; | |
| type Severities = 'success' | 'info' | 'warn' | 'error'; | |
| @Injectable() | |
| export class NotificationsService { | |
| notificationChange: Subject<Object> = new Subject<Object>(); | |
| notify(severity: Severities, summary: string, detail: string) { | |
| this.notificationChange.next({ 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
| import { NotificationsService } from 'PATH_TO_NOTIFICATIONS_SERVICE'; | |
| .... | |
| .... | |
| constructor(private notificationsService: NotificationsService) { } | |
| .... | |
| .... | |
| ngOnInit() { | |
| this.notificationsService.notify('info', 'some component', 'ngOnInit was called!'); | |
| } | |
| .... | |
| .... |
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
| //instantiate the notification component | |
| <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
| //just import the service in order to provide it | |
| .... | |
| .... | |
| import { NotificationsService } from './notifications/notifications.service'; | |
| .... | |
| .... | |
| @NgModule({ | |
| imports: [ | |
| CommonModule | |
| ... | |
| ], | |
| declarations: [ | |
| TopComponent | |
| ], | |
| providers: [NotificationsService] | |
| }) | |
| export class TopModule { | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I had to change in notifications.component.ts
it would show one message at the time... but is the only way it work for now..
without that it shows just one time.. and never come back.. debugging to see if I find something else..
hope it helps someone else!