I am new to PrimeNG, but found that you can create beautiful things with it. I'm trying to build a growl from PrimeNg, but I keep getting this error “Can't bind to the“ value ”because it is not a known property of“ p-growl. ”I used the“ Message ”from PrimeNG, and this one works fine, so I don’t know what i am doing wrong because the other one works.
My ts component
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 HTML component
<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 does not work