Primeng-advanced-growl — make sure your users see the errors

Image for post
Image for post

The primeng-advanced-growl library is a wrapper around primengs growl module mainly realized with RxJs. Primeng-advanced-growl brings you a lot of powerful additional features.

  • It allows you to choose a default lifetime for each message. Each message receives this lifetime when it is created. This feature differs from the original primeng growl module because the lifetime is unique for each message.
  • It allows you to choose if you want to freeze all messages on hover. If you enable this feature and hover over a message all messages will internally stop their timer and wait until you leave the messages again. Each message will restart its timer with the remaining time.
  • In addition to freezing all messages you also have the possibility to freeze only one message on hover.
  • You can limit the number of messages that will be displayed on screen. Notice that all other messages that can not be displayed are cached and will be displayed as soon as another spot is available.
  • You can optionally pas additional properties to each of your messages. You can then retrieve those properties by clicking on a message as an output event.
  • The newest and one of the most powerful features was released in the 3.1.0-reindeer version. Additionally to the default lifetime you can now specify a new unique lifeTime for each message. This means you can say I want to create a info message with a lifetime of 2 seconds, a success message with a lifetime of 3 seconds and so on. This is also the feature we are going to use to make sure that our users do not miss error messages.

If you want to get a better idea of what it does you can check out the demo page at https://primeng-advanced-growl.firebaseapp.com/ and play around with the library.

Before we dive into the code that is required to implement this feature we first need to install the library. So let’s run the following command.

npm install — save primeng-advanced-growl

For the growl messages to get correctly displayed we need to make sure that we have all the required primeng styles available. We import the primeng.css, a theme and font-awesome. Font-awesome is used to display the icons on our growl messages. If you use the angular cli you need to add the following lines to your styles array inside the .angular-cli.json.

Next we need to import the AdvGrowlModule inside our app.module.

By importing this module we have access to the adv-growl component inside our app.component.html. Notice that we have also imported the ButtonModule from primeng. We will use this module to create some buttons to help us create growl messages. So let’s go on and use the adv-growl component.

We have now used the adv-growl component and specified a default lifetime of 3000 for each message. Notice that you can pass much more properties to the adv-growl component. In our example we will only use the lifetime. But feel free to use other features like pausing on hover etc… by passing other properties to the adv-growl component (https://www.npmjs.com/package/primeng-advanced-growl#input).

Alright, we have now created our html with the adv-growl component and some buttons. To actually display some growl messages we need to call the provided createMessage methods on the AdvGrowlService.

The AdvGrowlService is availbale via Angulars dependency injection. To actually create some messages we have implemented the different methods that are called by our button clicks. Those methods will then call the appropriate function on the AdvGrowlService. If we run our app and click on the buttons from left to right we should see the following:

Image for post
Image for post

Have you noticed that all messages will disappear within the specified time passed to the adv-growl-component? As mentioned primeng-advanced-growl will use the passed life property as default lifetime for each message.

Great! We have created messages that disappear after a given time. But this still leaves us with a problem. In most cases it is good to let success, info and warning messages disappear. But we need to prevent that behaviour for error messages. We want error messages to be sticky. This means that they do not disappear until the user clicks them away. In the primeng-advanced-growl world sticky is equal to a life property of 0. If you do not pass a life property primeng-advanced-growl will set 0 as lifetime under the hood. Ok, but how can we say that we only want our error messages to be sticky.

As mentioned at the top this feature was introduced with version 3.1.0-reindeer. This version adds additional methods on the AdvGrowlService that are exactly designed for this purpose.

  • createTimedSuccessMessage
  • createTimedInfoMessage
  • createTimedWarningMessage
  • createTimedErrorMessage

Those methods have the same signature as the traditional createMessage methods. But in addition they accept a lifeTime property. If you specify such a property this lifeTime will be used instead of the provided default life. With this knowledge it is easy to make our error messages sticky. We just adjust our app.component.ts to call createTimedErrorMessage with a lifeTime of 0 instead of createErrorMessage.

Now all messages use the default lifetime but the error messages have their unique lifetime of 0 and are sticky. They do not disappear until the user clicks them away. With this new API you should be able to create powerful features.

Written by

Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store