Use primeNg GrowlModule globally through a service

notifications.component.html

<p-growl [value]="msgs"></p-growl>

notifications.component.ts

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();
  }
}

notifications.service.ts

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 });
  }
}

some.component.ts

import { NotificationsService } from 'PATH_TO_NOTIFICATIONS_SERVICE';
....
....
constructor(private notificationsService: NotificationsService) { }
....
....
ngOnInit() {
  this.notificationsService.notify('info', 'some component', 'ngOnInit was called!');
}
....
....

top.component.html

//instantiate the notification component
<app-notifications></app-notifications>

top.module.ts

//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 {
}

thanks for this code.. saved me some time :)

thank you as well :)

Thanks. I'm unable to make the notification to hide. is it just me?

Thanks so much! Exactly what I was looking for.

Thank you so much for the service, this is what I exactly have in my mind. Incase if the messages are sticky, just edit this line this.msgs.length = 0; to this.msgs= []; in notifications.component.ts, as mentioned in the documentation.

you make my day..

thanks a lot for your work. I had also the case, that I would like to have sticky or no-sticky. So I updated your version just a little bit, if someone ist interested.

notification.component.ts

• added isSticky and lifeTime property
• cast notification object
• get properties out of service call
• instead of this.msgs.length = 0 you need to empty it with a new array. Otherwise the growl primeng does not work properly

isSticky:boolean = false; lifeTime:number = 3000; subscribeToNotifications() { this.subscription = this.notificationsService.notificationChange .subscribe(notification => { let notificationObject = <NotificationsComponent> notification; this.isSticky = notificationObject.isSticky; this.lifeTime = notificationObject.lifeTime; this.msgs = []; this.msgs.push(notification); }); }

notifications.component.html
<p-growl [(value)]="msgs" [sticky]="isSticky" [life]="lifeTime"></p-growl>
notification.service.ts

• optional parameter for notify-function to add isSticky and lifetime

notify(severity: Severities, summary: string, detail: string, isSticky?:boolean, lifeTime?:number) { this.notificationChange.next({ severity, summary, detail, isSticky, lifeTime });

Sorry, didn't figure out how to to format it better....

I made a fork if you like to see it cleaner.

Great code,.. Thanks :D

Great solution, thanks

I detected a problem, maybe in my code:
Growl show message just in first time.
Others notification, simple does not works.

Any body passed by this problem:?

The MessageService exists within PrimeNG for that same reason.

@mleegwt the MessageService doesn't work for with my project for some reason.

Thanks, great code.
@filosofisto use sairam0903's answer

@filosofisto, same problem here. Only works for the first time.
I step in, and the msg array correctly gets new value. Not sure why the growl doesn't show the new message

Somehow the notification disappears when a different route is activated. Tried to fix it with setTimeout, but this does not seem like an appropriate solution. Any thoughts on how to make it visible inter-route?

I have the same problem @salmankazni. Did you know how disappear the message?

@salmankazmi @chaliaga you got to set <p-growl **[(value)]="msgs"**></p-growl> It didn't work for me until I made two-way binding.
And also:
this.subscription = this.notificationsService.notificationChange
.subscribe(notification => {
this.msgs = [];
this.msgs.push(notification);
});

If you look in the documentation for growl in change detection section :

Change Detection
In case messages are provided via the value property instead of service, growl either uses setter based checking or ngDoCheck to realize if the messages has changed to update the UI. This is configured using the immutable property, when enabled (default) setter based detection is utilized so your changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change. For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item. On the other hand, setting immutable property to false removes this restriction by using ngDoCheck with IterableDiffers to listen changes without the need to create a new reference of data. Setter based method is faster however both methods can be used depending on your preference. Note that immutable property also defines how Growl treats the value, for example when immutable is enabled removing a message does not mutate the original value but creates a new array.

So you either use the above code as is with [immutable]="false" or leave [immutable]="true" (default) and replace push with spread operator this.growl = [...this.growl , notification]

@HermenOtter, The PrimeNG docs are not great for implementing their messaging service. In a further up component (e.g. app.component), you need to add the message service as a provider, add the service in the constructor, and then add a growl component in your HTML which references your component's instance of the service, such as is shown here:
https://stackoverflow.com/questions/50410239/angular-2-primeng-message-service-not-showing-message

For me, PrimeNG's built in messaging service did not work until I followed these steps, at least.

@hoffmast I am trying to do what you described with the Toast component and the MessageService, as described in the (poor) documentation (https://www.primefaces.org/primeng/#/toast).
So, as you said, the MessageService is defined as a provider in my app component, the toast component is in the HTML of the app component as well, but I cannot see how to link it to a particular component further down in the hierarchy.

It goes without saying that I don't want to add the toast component on every single component's template that is using it. I want to add it once in one component (e.g. the app component) and reference it from there, pretty much as it's done in this example. But this example uses the NotificationService, subscriptions, and messages, not the MessageService, which, according to the documentation at least, should not require any such extra steps.

What am I missing?

@MrGoss @filosofisto, :- Getting this error. Please suggest.
'app-notifications' is not a known element:

1. If 'app-notifications' is an Angular component, then verify that it is part of this module.
2. If 'app-notifications' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

@MrGoss @filosofisto, :- Getting this error. Please suggest.
'app-notifications' is not a known element:

1. If 'app-notifications' is an Angular component, then verify that it is part of this module.

2. If 'app-notifications' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

Hi, @rahulmatty Did you import the module on your app.module.ts?

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.