title: PrimeNG Growl Can't bind to 'value' since it isn't a known property of 'p-growl'
body: <p>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.</p>
  
  <p>My component ts</p>
  
  <pre><code>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 =&gt; this.listSenders = listSenders,
                  error =&gt; this.errorMessage = &lt;any&gt;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.'});
        }
      }
  }
  </code></pre>
  
  <p>My component HTML</p>
  
  <pre><code>&lt;div id="title"&gt;
      &lt;span&gt;{{pageTitle}}&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
    &lt;p-growl [value]="msgsGrowl" sticky="sticky"&gt;&lt;/p-growl&gt;
    &lt;p-messages [value]="msgs"&gt;&lt;/p-messages&gt;
    &lt;p-pickList [source]="listSenders" [target]="listReceivers" sourceHeader="Kies ontvangers" targetHeader="Ontvangers" [responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" [showSourceControls]="false" [showTargetControls]="false"&gt;
        &lt;ng-template let-user pTemplate="item"&gt;
          &lt;div class="ui-helper-clearfix"&gt;
            &lt;div style="font-size:14px;"&gt;{{user.Name}}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-template&gt;
      &lt;/p-pickList&gt;
     &lt;h1&gt;Mail&lt;/h1&gt;
  &lt;p&gt;&lt;u&gt;Onderwerp:&lt;/u&gt; &lt;input type="text" class="form-control" [(ngModel)]="subject"/&gt;&lt;/p&gt;
  &lt;p-editor [(ngModel)]="text" [style]="{'height':'320px'}"&gt;&lt;/p-editor&gt;
  &lt;p style="margin-top: 10px;"&gt;&lt;button pButton type="button" label="Versturen" icon="fa-check" iconPos="left" (click)="onclick()"&gt;&lt;/button&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p>My module</p>
  
  <pre><code>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 {
  }
  </code></pre>
  
  <p>TL;DR: My PrimeNG Message module works, but my PrimeNG Growl module doesn't work</p>