Primeng: Growl "life" property doesn't work

[SpiderPork]

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)
Don't have

Current behavior

I have a p-growl component with life="5000".
When it shows, it stays visible forever (until I click on the "x" icon).

Expected behavior

p-growl is visible only for 5 seconds.

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.1.X
  

• PrimeNG version: 4.0.0-RC5
  

• Browser: [all]
  

• Language: [all | TypeScript 2.3 ES5]

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

[bogacg]

Second to this, I'm having same issue

[Mrtcndkn]

Your growl component should look like this with life attribute;

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

I'm guessing you are trying to use life attribute like this;

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

You need to remove the sticky attribute because it's disabling the life attribute.

If your problem still insists after these instruction feel free to open this issue again.

@SpiderPork @bogacg

[SpiderPork]

This is my p-growl:

With RC3, it works.
With RC5, it doesn't work.

[SpiderPork]

@Mrtcndkn I can't reopen this issue.

[Mrtcndkn]

Could you please share your service that creating your growlMsgs?

[SpiderPork]

import {Injectable} from "@angular/core";
import {Message} from 'primeng/primeng';
import {GROWL_MESSAGE_TYPES} from "../config-var";

@Injectable()
export class GrowlService {

    /*
    In config-var:

    export enum GROWL_MESSAGE_TYPES {
        warn,
        error,
        success,
        info
    }

    */

  //coda dei messaggi growl da mostrare in alto a destra
  growlMsgs: Message[] = [];

  /*
   Mostra la notifica.
   Il parametro di ingresso è lo stesso di quello usato da primeng; per esempio:
   {severity:'info', summary:'Info Message', detail:'PrimeNG rocks'}
   */
  private _showGrowl(params: Message) {
    this.growlMsgs.push(params);
  }

  showMessage(typeMessage: GROWL_MESSAGE_TYPES, titleParam: string, textParam: string) {

    let sev = GROWL_MESSAGE_TYPES[typeMessage];
    let param = {severity: sev, summary: titleParam, detail: textParam};
    this._showGrowl(param);
  }

  showGenericSuccessMessage() {
    let param = {
      severity: 'success',
      summary: 'Operazione eseguita',
      detail: 'Operazione eseguita correttamente.'
    };
    this._showGrowl(param);
  };

  showGenericErrorMessage() {
    let param = {
      severity: 'error',
      summary: 'Operazione non riuscita',
      detail: 'Impossibile completare l\'operazione.'
    };
    this._showGrowl(param);
  };

  constructor() {
  }
}

[Mrtcndkn]

In 4.0.0-RC5 we are now supporting immutable objects which means your original array should stay put and you need to do your changes on a shallow copy of it for handling the changes.

You can check this commit;

https://github.com/primefaces/primeng/commit/cc9b483ddab4c1ce125ccf07aa9628bed921398e

[bogacg]

With final release (4.0) still having this. In my case I've used this pattern as described in Angular Docs, so growl messages are trigerred from other components by an app level service and app component observes those events, when received a message, adds it to a component defined array (app component), which growl's value property points to. But they are not removed after 5 seconds.

[ASK83]

I have the same problem with 4.0, which I didn't with rc3. I noticed that the way to make it work is to empty out (messages =[]) the messages array passed to the growl. This way the life property works but this way we cannot have multiple messages coming in, like before. I don't know what would be the proper way of pushing multiple messages in the new version.

[jgill248]

I'm having the same issue. I have a service that is giving me an object that i am then pushing onto the message array that is being passed to growl.

this._msgs.push({ severity: noMod.severity, summary: noMod.summary, detail: noMod.detail });

[huineng]

I'm not sure if you all notice, but the growl is always sticky, even on your demo page they don't close anymore automatically.

it has to do with your refactoring to setter last week

the setter is not updating / being called when you push a message to the array , therefore it doesn't handle the valuechange that contains the sticky

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

[hugo-dlb]

I'm having the same issue.

[vyrtus15]

I'm faced with same problem , on last version

[fewal]

After closing growl message with "x" button its object is still present in my messages array in related component. Is it related to this bug or should I somehow remove the object from the array? Is there any "on Hide" event?

[hugo-dlb]

As @huineng said, the bug seems to be related to last week update. It is indeed related to this bug.

[eXXeption]

Facing the same problem.
Addign some logging (to generated JS code) shows that test 5 ist only logged once ,not on every message push (as it was previous with the ngDoCheck).
This cannot work as long as you are using the same messages array.

Object.defineProperty(Growl.prototype, "value", {
        get : function () {
            console.log('test4');
            return this._value;
        },
        set : function (val) {
            this._value = val;
            console.log('test5');
            if (this.container) {
                console.log('test6');
                this.handleValueChange();
            }
        },
        enumerable : true,
        configurable : true
    });
Growl.prototype.handleValueChange = function () {
        var _this = this;
        this.zIndex = ++domhandler_1.DomHandler.zindex;
        this.domHandler.fadeIn(this.container, 250);
        console.log('test');
        if (!this.sticky) {
            console.log('test1');
            if (this.timeout) {
                console.log('test2');
                clearTimeout(this.timeout);
            }
            this.timeout = setTimeout(function () {
                console.log('test3');
                _this.removeAll();
            }, this.life);
        }
    };

[Mrtcndkn]

We are working on this issue at the moment.

[eXXeption]

Current workaround:
<p-growl [value]="messages" [life]="7000"></p-growl>
and every time you want to push a new message
this.messages=[{severity: '', ...}];
(Overwrites previous growls everytime tho)

A suggestion for making growls usable with immutables:
Support a messageSubject, where the user emits new messages and the growl-comp is listening for.
I would appreciate that, as i am anyways always using a service wich returns a subject, as i want to push growls from anywhere in my application.

        message.getMessages().subscribe((message: Message) => {
            this.messages = [message];
        });

Wouldn't it be a good idea to just pass that directly into the growl component?

[brian428]

Folks, I know PrimeNG is free so we can't complain much. And I thank them for their contribution to the community. But...

PrimeNG is being used in a lot of apps now. Regressions like this (which happen uncomfortably often) are why I'd urge (_again_) that PrimeFaces to build (or ask the community to help them build) a suite of unit tests for PrimeNG. If anyone wants to discuss this further, I set up a forum thread: https://forum.primefaces.org/viewtopic.php?f=35&t=50758

[cagataycivici]

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];
  }

We can't replicate it locally so please provide a plunkr and we'll review again.

[cagataycivici]

Following works, after 3 seconds messages are cleared.

export class GrowlDemo {

    msgs: Message[] = [];

    showMultiple() {
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Message 1', detail:'PrimeNG rocks'});
        this.msgs.push({severity:'info', summary:'Message 2', detail:'PrimeUI rocks'});
        this.msgs.push({severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'});
    }
}

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

<button type="button" pButton (click)="showMultiple()" label="Multiple"></button>

To sum up, please provide a runnable test case via plunkr.

[huineng]

Ok, i still think there' something not optimal here ... but i solved it by always proceeding my function with an empty array.

myUpate() {
        this.msgs = [];
        this.msgs.push ...

when you push at a later stage to an array that is not empty , it won't trigger the message

Also you might have a look on your demo page, the growl messages are sticky and don't close automatically over there... while thy should

thanks

[cagataycivici]

Sticky messages dont close auto, if you push later, use spread operator instead.

[huineng]

that's not the case on your demo page , sticky is nowhere declared as true and default is false, so why on the demo page of prime, they stick ?

thanks for the spread hint

[Mrtcndkn]

On our live demo there is source section we are using growl as sticky on our demo.

Like this;

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

[brian428]

I've always been feeding a new array to the Growl component, like this:
this.notifications = [ ...this.notifications, value ];

When I push a new notification, I see it show up, but so do all of the previous notifications. It's like the old items aren't getting cleared out by the Growl component. This worked fine before 4.0.0-RC.4.

I'm trying to create a Plunkr to reproduce it.

[brian428]

@cagataycivici Here's a Plunkr that demonstrates the Growls not being cleared. http://plnkr.co/edit/9tjlBM?p=preview

I assumed this was related to "sticky", and that even though the Growl fades, it was still considered sticky and isn't removed. If you'd like me to create a new issue, just let me know.

[cagataycivici]

I see, that is fixed via #2712 which requires to use two-way so after a message fades out or a user closes it manually, growl updates your msgs array so older ones are cleared properly from your model as well.

[hugo-dlb]

@cagataycivici the messages are not deleted from the array after they fade out even using two-way databinding with [(value)]="msgs"
Do i have to add something else?

[cagataycivici]

You need to use 4.0.1 which is not released.

[sabithpocker]

When will 4.0.1 be released? Any idea? I'm waiting for couple of bug fixes in that release :) Any rc available in npm?

[Eclektic]

No due date for the 4.0.1 release, you can see advancement here: https://github.com/primefaces/primeng/milestone/60

[hugo-dlb]

Thank you.

[lekhnath]

Waiting for v4.0.1

[h4s33b]

I am also having same issue. :(

[xtoff]

4.0.1. milestone is complete!

[cagataycivici]

We will release it tomorrow.

[lekhnath]

NOT Working even after upgrading to v4.0.1 :(

[xtoff]

Idd, I have the same problem..

[cagataycivici]

Use two way syntax

[lekhnath]

@cagataycivici you mean [(value)]="messages" ? Not helping.

[xtoff]

Thanks, it works..
this.msgs = [...this.msgs];

[eladcandroid]

It works for me only when i use the spread operator ( this.msgs = [...this.msgs]; ) and change the value of p-growl to take the messages array itself (msgs) instead of using a class variable for it.
No need for two-way data-binding.

[cagataycivici]

Two way binding might be necessary to remove the message when the user clicks the X icon of a message to update your model array.

[eladcandroid]

Right. Also i see that the messages are sticky when not using two way data-binding (they stays in the array also after displaying them again). So use [(value)]="msgs"

[AstRonin]

<p-growl [(value)]="msgs"></p-growl>
v. 4.0.1
Growl do not close after 3 seconds...

[Pythorogus]

Hi, i'm in 4.0.2 and still the problem.
this.msgs = [...this.msgs] is working but the messages stay in the array after disappear. So when another message is pushed, all the messages appear.

[cagataycivici]

Provide a plunkr to replicate please.

[eliasdraexler]

Did you use the two-way data binding as mentioned above?
<p-growl [(value)]="msgs"></p-growl>

[Pythorogus]

Indeed, sorry i forgot data binding, working now. Thank you !

[vinodkumar526]

in my case Growl life is working fine with 4.0.0 (by using CLI)
But when I deployed my project into tomcat(by using # ng build -prod -bh/project_name/ -d/project_name command) then, life is not working at all .
please give me the solution that what should I do to achieve that.

[onekaking]

I'm in v4.0.3 , messages are still not disappear, [sticky] or [life] is not working. what should i do in mean time ?

[kiley0]

using v4.0.1, the default life of 3000 _is_ working for me if i first clear my msgs array to [] before pushing the new message to it. it's not perfect, but the growl does disappear after 3 seconds.

this.alertMessages = [];
this.alertMessages.push(message);

[gregkopp]

I'm seeing the same issue in my v4.0.1 install. It used to work in previous version.

[cagataycivici]

Try 4.0.2 please and provide a plunkr if issue persists. Do not forget to use two-way binding on messages as well.

[gregkopp]

Same problem in 4.0.2 and 4.0.3

[zatura33]

Heres how to make ti work:
in html

in .ts file
msgs: Message[] = [];

// to show message
show(msg) {
this.msgs = [{severity: 'info', summary: 'Confirmed', detail: 'msg'}];
}

[LeoLetourneur]

Little fix waiting for the real fix :
Timeout will hide messages 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)
}

[zatura33]

on my side its working fine withouht timeout

---

From: Letourneur Léo [e-mail]
Sent: June 28, 2017 6:25 AM
To: primefaces/primeng
Cc: Vincent; Comment
Subject: Re: [primefaces/primeng] Growl "life" property doesn't work (#2634)

Little fix waiting for the real fix :
Timeout will hide messages 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)
}

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/primefaces/primeng/issues/2634#issuecomment-311620142, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASVbE5CMwDjLlbJybO-YEQ1O5zopj1kIks5sIin9gaJpZM4NLcOM.

[toregua]

Hi, same problem for me with "primeng": "^4.1.0-rc.2". life property is totally ignored and the message keep all life long

[cagataycivici]

@toregua Please provide a test case based on plunkr below and we'll review again.

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

[toregua]

@cagataycivici i have tried with your plnkr to reproduce my problem and i remark it was because i used
sticky="sticky" in the same time. So definitively there is no bug with that in ^4.1.0-rc.2!!!
Sorry for disturbance and thank you for your reactivity and your great components

[mustafaekim]

I am having the same issue with Angular 4.3.1, ngRx/store 2.2.3 and primeng 4.1.1. The growl message never disappears

[zatura33]

[immutable]= "false"

---

From: Mustafa Ekim [e-mail]
Sent: July 20, 2017 4:15 PM
To: primefaces/primeng
Cc: Vincent; Comment
Subject: Re: [primefaces/primeng] Growl "life" property doesn't work (#2634)

I am having the same issue with Angular 4.3.1, ngRx/store 2.2.3 and primeng 4.1.1. The growl message never disappears

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/primefaces/primeng/issues/2634#issuecomment-316817421, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASVbE3byZRtwoiXAfIhUOiM64nWd7f9Pks5sP7VwgaJpZM4NLcOM.

[masagatech]

[immutable]= "false" works thanx

[jencela]

[immutable]= "false"
Works! Thanks!

[nwrbs]

While the message will disappear, it does not work as expected. If I push three messages on the stack at different times, all messages are removed at the same time. The timeout appears to clear ALL messages in the array, rather than individual messages based on thier time on the stack. I would expect a message to individually be cleared out based on its own timeout period.

[JulianQuinones]

The same here.
Pushing several messages on the stack at different times all of them are removed at the same time... So the timeout is not applied individually

[leslysmile]

Prime guys, please suggest how to make message timeout individually instead of being in array for long time when new message keep going and then disappear together.

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