Primeng: Growl not disappear

[sourdoth]

Hello,

After updating version 2.0.0 to 4.0.3 growl does not disappear after a few seconds, the definition of the element is:

NOTE: It also happens at https://www.primefaces.org/primeng/#/growl

Greetings.

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/VZbdZfQ7SuTV87tTkbYR?p=preview

Current behavior

After updating version 2.0.0 to 4.0.3 growl does not disappear after a few seconds

Expected behavior
Growl should disappear after 3 seconds

Minimal reproduction of the problem with instructions

It also happens at https://www.primefaces.org/primeng/#/growl

HTML

TS
messageService.messageSource$.subscribe(
msg => {
this.msgs.push(msg);
});

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 4.0.0
  

• PrimeNG version: 4.0.3
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[CatherineSavenko]

same issue

[VagrantAI-c]

+1, having the same issue

[upmauro]

Brackets are missing for "sticky" input on doc's. This cause the problem on showcase.

In your issue you are not using sticky, so, i can't simulate the problem when sticky is not defined. If you are removed the property to open issue, please use [sticky] with brackets instead of sticky.

[sourdoth]

hi.
I probe with but didn´t work

[upmauro]

@sourdoth

When strick if defined, growl messages are not removed automatically after a period defined by life option. Please change to false or remove the attr

[CatherineSavenko]

@upmauro When will be the next release version with current fix ?

[upmauro]

@CatherineBorykina in actual release this works, but you need use brackets in [sticky] attribute with false value or remove this attribute.

[sourdoth]

@upmauro
I try with:

but growl not disappear

[CatherineSavenko]

@upmauro No, it doesn't work on version 4.0.3. Either with or without [sticky] attribute.


But it works fine, if I downgrade my primeng version to 2.0.0

[jgiroldo]

@upmauro
I try with:

but growl not disappear

I'm haaving the same issue even on v 4.0.3

[Bangood]

perhaps 'Good Bye DoCheck' is the reason that causes this issue,please see: https://www.primefaces.org/primeng-4-0-0-rc4-released/
so, assign a new array data to msgs,or like this:
this.msgs = [];
this.msgs.push({severity: 'error', summary: 'Error Message', detail: 'please disappear automatically'});
it will work well.

[sourdoth]

hi.
perfect i just add this.msgs = []; and work
thanks.

[VagrantAI-c]

So, no need to clear, but one can just serialize/deserialize to make that work, e.g.:

this.messages.push({ severity: 'error', summary: 'some error', detail: 'error description' });
this.messages = JSON.parse(JSON.stringify(this.messages));

Though i don't think this is a correct behavior overall

[gregkopp]

This does not work for me in 4.0.1. It used to work for me before upgrading to Angular 4 and PrimeNg 4

<p-growl [(value)]="this.msgs" [life]="3000" [sticky]="false"></p-growl>
<p-growl [(value)]="this.errorMsgs" [sticky]="true"></p-growl>

  ngOnInit() {
    this.msgs = [];
    this.errorMsgs = [];
    this.messageservice.msgs$.subscribe((messages: Message[]) => {
      messages.forEach((message: Message) => {
        if (message.severity === 'error') {
          this.errorMsgs.push(message);
        } else {
          this.msgs.push(message);
        }
      });
    });
  }

[ajambrovic]

Same issue here, works in "primeng": "4.0.0-rc.1", doesn't work in newer versions:

<p-growl [value]="msgs"></p-growl>

ngOnInit() { this.appNotificationService.getMessage().subscribe( (data: Message) => this.msgs.push(data) ); }>

@Injectable()
export class ApplicationNotificationService {

private subject: Subject<Message> = new Subject<Message>();

setError(detail: any) {
    let message = '';
    if (typeof detail === 'string') {
        message = detail;
    } else if (typeof detail === 'object' && !!detail['msg']) {
        message = detail['msg'];
    }
    this.subject.next({ severity: 'error', summary: 'Greška', detail: message });
}

setMessage(severity: string, detail: string, summary?: string, ): void {
    this.subject.next({ severity: severity, summary: summary, detail: detail });
}

passMessage(message: string): void {
    this.subject.next({ severity: 'info', summary: 'Transakcija uspješna', detail: message });
}

getMessage(): Observable<Message> {
    return this.subject.asObservable();
}
}

[cyberrranger]

@ajambrovic @gregkopp

Have you read the answers above at all?

use this.messages = JSON.parse(JSON.stringify(this.messages));
or
this.growl = [...this.growl, {severity: severity, summary: summary, detail: text}];

[ajambrovic]

@cyberrranger - I did, they are:

1. Use sticky/life explicitly - doesn't work
2. Clear messages - can't do that since it would only show the last message
3. The downvoted @VagrantAI-c comment (which you refer to) - looks like a hack

I suppose num 3. would work, but I was hoping for a cleaner solution (not to mention that I'm confused as to why something that worked up to (and including) 4.0.0-rc.1, doesn't work.

[cyberrranger]

@ajambrovic i use 4.1.0-rc.2

and without problems

this.growl = [...this.growl, {severity: severity, summary: summary, detail: text}];

<p-growl [(value)]="growl" life="5000"></p-growl>

[fplini]

Hi all, I also have this problems.
I fixed it with a workaround.
I have a message service where the messages are stored and I have a lot of utility methods to add msgs.
When I add a message I also call an internal function with a timeout that clear the messages lists.

This is my utility method (obviously I have a msgs variable in my service):
addMsg(severity: string, msg: string, detail: string = '') { this.msgs.push({severity: severity, summary: msg, detail: detail}); this.setHideTimeout(); }

and this is the simply timeout function
setHideTimeout() { setTimeout(() => { this.msgs = []; }, 5000); }

And at the end on my component
<p-growl [value]="msgSvc.msgs()" ></p-growl>

It seems to works fine, hope this could be useful for someone.

Have a good day
Fabrizio

[cyberrranger]

@fplini ist a different [(value)] and [value], show my answer

[fplini]

@cyberrranger yes I know. I'm using [value] because I get the messages from a method inside service (only to read).

[patriknil90]

I'm also experiencing some troubles with the growl after upgrading (4.1.0). Not only does it not dissappear after life time, but sometimes the message that is pushed to the array in the component doesn't pop up on the screen.

<p-growl [(value)]="generalMsgs" life="4500" [style]="{'z-index':'1000000'}"></p-growl>
<p-growl [(value)]="apolloErrorMsgs" sticky="true" [style]="{'z-index':'1000000'}"></p-growl>

generalMsgs: Message[] = [];

apolloErrorMsgs: Message[] = [];

let generalMsgSub = this.msgService.msgsSubjects.general.subscribe(data => {
        console.log("GOT NEW GENERALMESSAGE");
        console.log(data);
        this.generalMsgs.push(data);
});

let errorMsgSub = this.msgService.msgsSubjects.error.subscribe(data => {
       console.log("GOT NEW ERRORMESSAGE");
       console.log(data);
       this.apolloErrorMsgs.push(data);
});

[patriknil90]

There has been a lot of posts in this thread. If anyone in the PrimeNg team has had a look at this, can you please give some information about if it's up to us to programmatically set this.msgArray = [] in a setTimeout() or is there a fix for the "life" attribute coming up?

Thanks in advance! // Happy user

[fplini]

Hi @patriknil90 , I found a tmp solution with setTimeout (check my post about 4 ago).
Tell me in private if you need more help.

F

[patriknil90]

Thank you @fplini , will use that as for now. Much appreciated.

[LeoLetourneur]

Little fix waiting for the real fix :

@fplini fix hide all messages. This one will hide only one by one

addGrowlMessage(sev, sum, det) {
let message = { severity : sev, summary : sum, detail : det };
this.msgs.push(message);
setTimeout(() => {
this.msgs.splice(this.msgs.indexOf(message), 1);
}, 3000)
}

[fplini]

Many thanks @LeoLetourneur I know this issue but I didn't have much time to fix it.
Thanks!

[opiepj]

@fplini What if our projects are paying for your templates? Will your team fix it now? This problem has been persisting for far too long.

[fplini]

Hi @opiepj, I don't have any team, I'm only a developer and I'm using PrimeNG for my project.
I don't know what do you really mean with your message :smile:

[birop]

The same problem can occur if the p-growl is placed inside an *ngIf block.
For me removing the *ngIf solved it.

[tidusjar]

This is still an issue and I don't think this bug should be closed.

[chriskyndrid]

Try this:

       public Messages: Message[] = [];
       ....

        this.Messages = this.Messages.slice();
        this.Messages.push({severity: 'error', summary: 'Error in Request', detail: errorMsg});

It should work just fine for now and will stack until your lifetime on a per item basis. Does not need the immutable flag either.

[tidusjar]

@upmauro can you please reopen this issue.

[juanlet]

still having this issue...they don't dissapear