Use PrimeNG Message and Growl as a global service of the application.

About-the-notification-component.txt

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.
  
  

my-shared-module.ts

// If you want to use in a shared module:
...
import { GrowlModule, MessagesModule } from 'primeng/primeng';
import { NotificationsService } from '@wheels/shared/notifications/notifications.service';
import { NotificationsComponent } from '@wheels/shared/notifications/notifications.component';
...
@NgModule({
  imports: [...
           ...],
  declarations: [...
     NotificationsComponent,
     ...],...
  providers: [...
  ...],...
  exports: [...
    NotificationsComponent,
  ...]


export class MySharedModule {
  //
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MySharedModule,
      providers: [
        NotificationsService,

        /* PrimeNG Services */
        ConfirmationService
      ]
    };
  }
}

  

notifications.component.ts

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

notifications.service.ts

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

top-component.html

<app-notifications></app-notifications>

top-module.ts

...
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,
  ...]



  

where-to-use-component.ts

...
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 :)