ng2-gui-messages

  • this.messages.addInfoLoadMessage([“This message was added in the example component but will be displayed in a different box!”
  • The component is the one who display the messages to the user, and the service is where the messages have to be added.
  • addErrorLiveMessage(messages: Array) -> will add messages in the current page error box
  • addInfoLiveMessage(messages: Array) -> will add messages in the current page info box

Feedback messages manager for Angular 2

@OctavioGB19: @magentainnova @angularjs 2 #opensourse library has almost 100 douwnloads on @npmjs see It on @github

ng2-gui-messages is an Angular 2 library for managing feedback messages to the user that will save your day. It can handle 4 different categories of messages in separate boxes: Success, Error, Warning and Info, and has the ability to display them in the current page or in the next one to be routed.

To install this library, run:

Once the library is imported, you can use its component and service. The component is the one who display the messages to the user, and the service is where the messages have to be added.

In each template that you want to display messages to the user, just add the ng2-gui-messages component and will handle it for you!

To use the styles and classes made by us, just use:

To use your custom CSS classes, declare the component in the template specifying your classes for the boxes that you want to be custom. The error box will use “errorClasses”, the info box will use “infoClasses”, the warning box will use “warningClasses” and the success box will use “successClasses”.

In your logic, whenever you need it, you will be able to add the messages to be displayed to the user. In order to do this, you only have to call the propper method in the service. The service has 2 important methods that you will use for each message category, the parameter to them is an array of String that will have the messages to be displayed in the component.

addErrorLiveMessage(messages: Array) -> will add messages in the current page error box

addErrorLoadMessage(messages: Array) -> will add messages in the next page to be routed error box

addSuccessLiveMessage(messages: Array) -> will add messages in the current page success box

addSuccessLoadMessage(messages: Array) -> will add messages in the next page to be routed success box

addWarningLiveMessage(messages: Array) -> will add messages in the current page warning box

addWarningLoadMessage(messages: Array) -> will add messages in the next page to be routed warning box

addInfoLiveMessage(messages: Array) -> will add messages in the current page info box

addInfoLoadMessage(messages: Array) -> will add messages in the next page to be routed info box

Example given:

files:

files:

Made with ❤️ by Magenta Innova.

If you use ng2-gui-messages in your Angular 2 application, we would love to hear about it! Drop us a line on twitter.

MIT © Magenta Innova “# ng2-gui-messages”

ng2-gui-messages