Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kirangsa/37e1bc894ee3c808585049ce6abb06a3 to your computer and use it in GitHub Desktop.
Save kirangsa/37e1bc894ee3c808585049ce6abb06a3 to your computer and use it in GitHub Desktop.
Use primeNg GrowlModule globally through a service
<p-growl [value]="msgs"></p-growl>
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();
}
}
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 });
}
}
import { NotificationsService } from 'PATH_TO_NOTIFICATIONS_SERVICE';
....
....
constructor(private notificationsService: NotificationsService) { }
....
....
ngOnInit() {
this.notificationsService.notify('info', 'some component', 'ngOnInit was called!');
}
....
....
//instantiate the notification component
<app-notifications></app-notifications>
//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