P-messages push method is not working for multiple messages

[deekshacse1999]

Multiple messages was working in primeng 8 version but after migrating it to primeng v13, push method is not working to display multiple messages
We have Message[] everywhere in the application. But its not working post primeng v8

[Cr3aHal0]

Could you provide a sample code or reproduction stackblitz about the current way you're using messages please ? Are you using MessageService or straight p-messages with input ?

[deekshacse1999]

Hi
I am using p-messages directly with Value property for binding. Pls find below sample code.

Sample Code:
App.component.html
<p-messages [(value)]="msgs">

<button type="button" (click)="show()">Show
<button type="button" (click)="clear()">Hide

App.component.ts
import {Component, OnInit} from '@angular/core';
import {Message,MessageService} from 'primeng/api';

@Component({
    templateUrl: './messagesdemo.html',
    providers: [MessageService]
})
export class [Messages](https://www.primefaces.org/primeng-v13-lts/#/messages)Demo implements OnInit {

    msgs: Message[] = [];
    
    constructor() {}

    ngOnInit() {
        
    }

show() {
this.msgs.push({severity:'info', summary:'Info Message', detail:'PrimeNG rocks'});
}

hide() {
this.msgs = [];
}

}

[Cr3aHal0]

Because of p-messages being onPush & the value input not being used verbatim by the component (e.g. in a *ngFor) but being proxied by a setter, you may need to update msgs reference by submitting a new array of message rather than using Array.push. I'm pretty sure this was specified someday within the official documentation but I could not find it in a 5 minutes window.

A better approach (generally when working with onPush sub components) would be :

show() {
  this.msgs = [...this.msgs, {severity:'info', summary:'Info Message', detail:'PrimeNG rocks'}];
}

hide() {
  this.msgs = [];
}

[mertsincan]

Thanks @Cr3aHal0 ;)