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

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