PrimeNG Growl Can't bind to 'value' since it isn't a known property of 'p-growl'

Question

I am new to PrimeNG but I discovered that you can create beautiful things with it. I am trying to build a growl from PrimeNg but I keep getting this error "Can't bind to 'value' since it isn't a known property of 'p-growl'". I've used the "Message" from PrimeNG and this one works fine, so I don't know what i'm doing wrong because the other one does work.

My component ts

import {Component, OnInit} from '@angular/core';
import {IMailModel} from '../models/mail.model';
import {MailService} from '../Services/mail.service';
import {Message} from 'primeng/primeng';


@Component({
    selector: 'coordinator-invitations',
    moduleId: module.id,
    templateUrl: 'coordinatorInvitations.component.html',
    styleUrls: ['../../assets/css/in/content.css'],
})

export class CoordinatorInvitationsComponent implements OnInit {
    listReceivers: IMailModel[];
    listSenders: IMailModel[];
    pageTitle: string = 'Uitnodigingen versturen';
    errorMessage: string;
    msgs: Message[] = [];
    msgsGrowl: Message[] = [];
    subject: string = "";
    text: string="";
    success: boolean;


    constructor(private _mailService: MailService) {

    }

    ngOnInit(): void {
        this._mailService.getMailAddresses()
            .subscribe(listSenders => this.listSenders = listSenders,
                error => this.errorMessage = <any>error);
        this.listReceivers = [];
    }

    onclick(): void {
      this.msgs=[];
      this.success=true;
      if(this.listReceivers.length===0) {
        this.msgs.push({severity:'error', summary:'Error', detail:'Er zijn geen ontvangers geselecteerd.'});
        this.success=false;
      }
      if(this.subject.length===0)
      {
        this.msgs.push({severity:'error', summary:'Error', detail:'Er is geen onderwerp opgegeven.'});
        this.success=false;
      }
      if(this.text.length===0)
      {
        this.msgs.push({severity:'error', summary:'Error', detail:'Er is geen inhoud ingegeven.'});
        this.success=false;
      }

      if(this.success===true)
      {
        this.msgsGrowl.push({severity:'success', summary:'Succes', detail:'De uitnodigingen zijn succesvol verstuurd.'});
      }
    }
}

My component HTML

<div id="title">
    <span>{{pageTitle}}</span>
</div>
<div id="content">
  <p-growl [value]="msgsGrowl" sticky="sticky"></p-growl>
  <p-messages [value]="msgs"></p-messages>
  <p-pickList [source]="listSenders" [target]="listReceivers" sourceHeader="Kies ontvangers" targetHeader="Ontvangers" [responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" [showSourceControls]="false" [showTargetControls]="false">
      <ng-template let-user pTemplate="item">
        <div class="ui-helper-clearfix">
          <div style="font-size:14px;">{{user.Name}}</div>
        </div>
      </ng-template>
    </p-pickList>
   <h1>Mail</h1>
<p><u>Onderwerp:</u> <input type="text" class="form-control" [(ngModel)]="subject"/></p>
<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>
<p style="margin-top: 10px;"><button pButton type="button" label="Versturen" icon="fa-check" iconPos="left" (click)="onclick()"></button>
</p>

My module

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CoordinatorPaneelComponent} from './coordinatorPaneel.component';
import {routing} from '../app.routing';
import {CoordinatorPaneelMenuComponent} from './DesignParts/coordinatorPaneelMenu.component';
import {CoordinatorTopMenu} from './DesignParts/coordinatorTopMenu.component';
import {CoordinatorDashboard} from './Dashboard/coordinatorDashboard.component';
import {CoordinatorInternshipAssignmentsViewComponent} from './InternshipAssignments/coordinatorInternshipAssignmentsView.component';
import {CoordinatorInternshipAssignmentsComponent} from './InternshipAssignments/coordinatorInternshipAssignments.component';
import {InternshipAssignmentService} from './Services/InternshipAssignment.service';
import {CommonModule} from '@angular/common';
import {CoordinatorInternshipProposalComponent} from './InternshipProposal/coordinatorInternshipProposal.component';
import {CoordinatorInternshipProposalDetailComponent} from './InternshipProposal/coordinatorInternshipProposalDetail.component';
import {CoordinatorInternshipProposalDetailViewComponent} from './InternshipProposal/coordinatorInternshipProposalDetailView.component';
import {CoordinatorInternshipProposalViewComponent} from './InternshipProposal/coordinatorInternshipProposalView.component';
import {PopupModel} from './DesignParts/popup.model';

import {CoordinatorInvitationsComponent} from './Invitations/coordinatorInvitations.component';
import {CoordinatorInvitationsViewComponent} from './Invitations/coordinatorInvitationsView.component';

import {PopupComponent} from './DesignParts/popup.component';
import {InternshipSpecialisationFilterPipe} from './Services/internshipSpecialisation-filter.component';
import {InternshipStatusFilterPipe} from './Services/internshipStatus-filter.component';
import {CoordinatorInternshipAssignmentDetailViewComponent} from './InternshipAssignments/coordinatorAssignmentDetailView.component';
import {CoordinatorInternshipAssignmentDetailComponent} from './InternshipAssignments/coordinatorAssignmentDetail.component';
import {MailService} from './Services/mail.service';
import {FormsModule} from '@angular/forms';
import {PickListModule} from 'primeng/primeng';
import {EditorModule, SharedModule, ButtonModule, MessagesModule, GrowlModule} from 'primeng/primeng';


@NgModule({
  imports: [routing, CommonModule, BrowserModule, FormsModule,
    PickListModule,
    SharedModule,
    ButtonModule,
    EditorModule,
    MessagesModule,
    GrowlModule
  ],
  declarations: [
    CoordinatorPaneelComponent,
    CoordinatorPaneelMenuComponent,
    CoordinatorTopMenu,
    CoordinatorDashboard,
    CoordinatorInternshipAssignmentsViewComponent,
    CoordinatorInternshipAssignmentsComponent,
    CoordinatorInternshipAssignmentDetailViewComponent,
    CoordinatorInternshipAssignmentDetailComponent,
    CoordinatorInternshipProposalComponent,
    CoordinatorInternshipProposalDetailViewComponent,
    CoordinatorInternshipProposalViewComponent,
    CoordinatorInternshipProposalDetailComponent,
    InternshipSpecialisationFilterPipe,
    InternshipStatusFilterPipe,
    CoordinatorInternshipProposalDetailComponent,
    CoordinatorInternshipProposalDetailViewComponent,
    PopupComponent,
    PopupModel,
    CoordinatorInvitationsComponent,
    CoordinatorInvitationsViewComponent,

  ],
  providers: [
    InternshipAssignmentService,
    MailService
  ]
})
export class CoordinatorModule {
}

TL;DR: My PrimeNG Message module works, but my PrimeNG Growl module doesn't work

Answer 1

import the GrowlModule from primeng in your app.module.ts.

import { GrowlModule } from 'primeng/primeng';

then add GrowlModule into the imports section of app.module.ts.

imports [GrowlModule]

Note: -It will bring all the api of primeng in your project as you are importing primeng/primeng which may increase size of your prooject.