Dynamic component dialog, confirm box cover.
Dynamic component dialog, confirm box cover.

What is it?

It’s the npm library made for the Angular 9+

What it does?

It provides:

  • Toast Notifications
  • Alert Box
  • Confirm Box
  • Cookie GDPR banner

Why it is better than others?

It has:

  • Better documented than others
  • Easy to use
  • d.ts files
  • Awesome snippet generator
  • The ability of global or local configuration
  • Predefined styles
  • Easy to change colors
  • Button generator
  • Simple and powerful Dependency Injection

Show me the API!

Okay

How does it look like?

Here’s how!

Toast Notifications


How to implement a beautiful toast message in the Angular application?

Simple Toast messages powered by ngx-awesome-popup

Writing a bunch of code in HTML just to open nice toast is ok if you have time, but in practice is better to open the popup just by calling the method from the typescript.

It’s the npm package ngx-awesome-popup! Well-documented angular library for Toast notifications, cookie banner, confirm box, dynamic dialog, and a few more. In this tutorial, we will go through the toast notification setup.

Step 1; install the library

npm i @costlydeveloper/ngx-awesome-popup

Step 2; configure the main application module

To be able to use this library, it is essential to import NgXAwesomePopupModule and ToastNotificationConfigModule inside your main application module (usually named AppModule), using forRoot method.

Add bolded lines to…

Costly Developer

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