Primeng: the growl message not auto close when default 3000ms times end

[lizardd]

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/QaWyAE?p=preview

Current behavior

the growl message not auto close when default 3000ms times end

Expected behavior

Minimal reproduction of the problem with instructions

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.0
  

• Browser: Chrome XX
  

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

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

[SchneMa]

Hey @lizardd your Growl just got the Sticky Attribute. Remove it and the Growl will disappear after the default 3 seconds or after the time you set by the "life" attribute of the growl.

Just look at the Attributes Section in the Docs for more infos https://www.primefaces.org/primeng/#/growl :)

[lizardd]

@SchneMa the issue has appear when I update primeng 2.x to 4.0.0. The link( https://www.primefaces.org/primeng/#/growl ) you give also has this issue. I review le code of growl ,

    set value(val:Message[]) {
        this._value = val;
        if(this.container) {
            this.handleValueChange();
        }
    }

set method can't run when I push msg to message Array. so the issue appear.

[SchneMa]

I don't know what your doing with that piece of code (i think because a lack of infos) but i can tell you if you switch the line of code from your plunker which containes the html of the growl, the growl closes automaticly like it should after time.

you have to change
<p-growl [value]="msgs" sticky="sticky"></p-growl>
to
<p-growl [value]="msgs" life="1000" ></p-growl>

with or without life attribute. I choosed 1000 ms so you could better see that its closing.

If you look at the SourceCode of the growl showcase you can see that the sticky attribute is set. So it won't close automaticly.

Upaded your Plunker (just the one line i mentioned)
Plunker

[JanCizmar]

it does not work for me too. (Copy & pasted <p-growl [value]="msgs" life="1000" ></p-growl>)

[JanCizmar]

And there is another problem, which could be related to this. When I close one message manually, another one never shows when i push it.

[quahkj]

I have the same problem as well when upgrading to primeng 4.0.0 (with Angular 4.1.1). It was worked in primeng 2.0.0 (Angular 2.0.0). This line doesn't work at all. I think this is a bug.

[sudheerj]

This was announced at blog announcement, see good-bye doCheck at;

https://www.primefaces.org/primeng-4-0-0-rc4-released/

So you need to create a new instance of array with spread operator or instead of push e.g.;

private _showGrowl(params: Message) {
    this.growlMsgs = this.growlMsg[...params];
  }

[quahkj]

Thanks Sudheerj. This fixed my problem.

[guntram]

@sudheerj your code does not work.
Your spread operator usage is wrong, this works:
private showGrowl(growlMessage: Message) {
this.growlMessages = [this.growlMessages, ...growlMessage];
}

_NOTE: this looks nice, but it does not work, just like the other spread operation..._

@quahkj
I wonder how this fixed your problem :D

[JanCizmar]

What I dont really understand what is going on here? You are using the spread operator for adding someting which is non array to array? @guntram Your code makes the result like:

[
[
{msg},
{msg},
{msg}
],
<messagesFrom parameter or whatever????>
]

So you are getting array with 2 elements.

[JanCizmar]

I have function like this, so I am creating the new Instance of messages array. In this case no flash massage shows at all.
public static addMessage(message: Message){ let msgs2 = this.messages.slice(); msgs2.push(message); this.messages = msgs2; console.log('message added'); }

[guntram]

@chlupaccom yea, damn. I didn't see that the growl opens a very small empty growl above due to the false result :(
I remember the growls working as expected when I .push() a message in, but now it doesnt work anymore, it just keeps sticky no matter what config.

[guntram]

@chlupaccom if i use your slice code, and all messages have disappeared, and i initiate a new message => all past (already vanished) messages show additionally to the new one...

[JanCizmar]

I know, I am just trying to test the behaviour after creating new instance, but as i mentoined, the strange thing is, that nothing really happens.

[JanCizmar]

I decided to use rather ngx-flash-messages package. PrimeNg seems unstable for me. It's a pitty, because it seems very nice.

[guntram]

Damn...First, the lead dev said "make em sticky" and I said "ok" and they were sticky. Then he said "oh man, it sucks so much if they are sticky" and I said "ok, but it doesn't work anymore with sticky=false"
:D

[guntram]

Yes that is very frustrating, maybe we are going to use the ngx-flash-messages too...
Thanks for the hint!

[guntram]

You can also concat, which also results in old vanished messages being displayed again:
this.growlMessages = this.growlMessages.concat(growlMessage);

[cp79shark]

Documentation still says to use push() instead of spread operator.

https://www.primefaces.org/primeng/#/growl

[leviathan414]

Try
this.msgs = []; this.msgs.push({ ...});
Seems to work but removes all previous messages.