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

@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.