boris-jenicek/ngx-awesome-popup

🚀 Open-source - The world's easiest, most powerful Angular dialog modal framework. Confirmation box, Alert box, Toast notification, Cookie banner, Any dynamic dialog content.

Thank you to everyone who has supported and used @costlydeveloper/ngx-awesome-popup over the years. This package will continue to work, but I have reached a point where I could not implement the features I envisioned within its framework. Therefore, I have decided to separate the concepts into more optimized packages, making @ng-vibe the new platform for our future development. Please transition to the new @ng-vibe series for ongoing updates and improvements: @ng-vibe/dialog, @ng-vibe/drawer, @ng-vibe/toastify and more to come. Your support and feedback have been invaluable, and I look forward to continuing our journey with these new tools.

❤️

Ngx Awesome Popup

The world's easiest, most powerful dialog modal framework for Angular.

• Extremely simple to use - try it on the DEMO!
• Animated!
• Without HTML selector!

Website

Visit the DEMO for code generators, demos and documentation.

Articles

If you in any doubt, find out the good reasons to use this library on the Dev.to.

License

Licensed under MIT.

ngx-awesome-popup's Issues

Angular 14 compatibility

When I try to use this library to show a pop-up upon button click. I get a loading indicator that remains forever.

I noticed from the tutorial provided that it mentions Angular 13.

Is this library compatible with Angular 14? if yes, what is causing the issue I am facing?

Your guidance is appreciated

Demo code has incorrect capitalizations

Hi, on this playground page there is this code:

ToastNotificationConfigModule.forRoot({
   ToastCoreConfig: {
      toastPosition: ToastPositionEnum.TOP_FULL_WIDTH, // check API documentation ToastPositionEnum
      progressBar: ToastprogressBarEnum.INCREASE, // check API documentation ToastprogressBarEnum
      toastUserViewType: toastUserViewTypeEnum.SIMPLE, // check API documentation toastUserViewTypeEnum
      layoutType: DialogLayoutDisplay.WARNING, // check API documentation DialogLayoutDisplay
      buttonPosition: 'right', // check API documentation VerticalPosition
      textPosition: 'right', // check API documentation VerticalPosition
      ConfirmLabel: 'Confirm', // default confirmation button label
      DeclineLabel: 'Decline', // default declination button label
      autoCloseDelay: 3000, // Milliseconds it will be ignored if buttons are included.
      disableIcon: true, // Disable icon by default
      allowHtmlMessage: true, // Allow HTML content in message by default
      // Optional default dispatch object.
      Dispatch: {
        Title: 'Global default title.',
        Message: 'Global default message.'
      },
      // openInElementID: 'custom-toast-wrapper-id', // it can be any element as wrapper anywhere in the DOM
   },
   GlobalSettings: {
      allowedNotificationsAtOnce: 4  // The number of toast notifications that can be shown at once.
   },
   // custom buttons overrides the buttons set with ConfirmLabel & DeclineLabel
   Buttons: [
     new ButtonMaker('Ok', 'ok', ButtonLayoutDisplay.PRIMARY), // check API documentation ButtonLayoutDisplay
     new ButtonMaker('Cancel', 'cancel', ButtonLayoutDisplay.SECONDARY)
  ]
})

but many items have Capitals (the type name), not the property name, which starts with lower case. Other code on this page is probably suffering the same problem.

I think the above should be (compare first letter of many of the options):

ToastNotificationConfigModule.forRoot({
   toastCoreConfig: {
      toastPosition: ToastPositionEnum.TOP_FULL_WIDTH, // check API documentation ToastPositionEnum
      progressBar: ToastProgressBarEnum.INCREASE, // check API documentation ToastprogressBarEnum
      toastUserViewType: ToastUserViewTypeEnum.SIMPLE, // check API documentation toastUserViewTypeEnum
      layoutType: DialogLayoutDisplay.WARNING, // check API documentation DialogLayoutDisplay
      buttonPosition: 'right', // check API documentation VerticalPosition
      textPosition: 'right', // check API documentation VerticalPosition
      confirmLabel: 'Confirm', // default confirmation button label
      declineLabel: 'Decline', // default declination button label
      autoCloseDelay: 3000, // Milliseconds it will be ignored if buttons are included.
      disableIcon: true, // Disable icon by default
      allowHtmlMessage: true, // Allow HTML content in message by default
      // Optional default dispatch object.
      dispatch: {
        title: 'Global default title.',
        message: 'Global default message.'
      },
      // openInElementID: 'custom-toast-wrapper-id', // it can be any element as wrapper anywhere in the DOM
   },
   globalSettings: {
      allowedNotificationsAtOnce: 4  // The number of toast notifications that can be shown at once.
   },
   // custom buttons overrides the buttons set with ConfirmLabel & DeclineLabel
   buttons: [
     new ButtonMaker('Ok', 'ok', ButtonLayoutDisplay.PRIMARY), // check API documentation ButtonLayoutDisplay
     new ButtonMaker('Cancel', 'cancel', ButtonLayoutDisplay.SECONDARY)
  ]
}),

matTooltip does not work inside fullscreen dialog ?

I have a dialog, which is opened with a code shown below :

const dialogPopup = new DialogInitializer(NgxPopupTooltipExample);

// Set some configuration.
dialogPopup.setConfig({
  width     : '100%',
  minWidth  : '100%',
  layoutType: DialogLayoutDisplay.NONE,
  fullScreen: true,
  escapeKeyClose: true,
  displayLoader: false,
});
dialogPopup.setButtons([
  new ButtonMaker('Cancel', 'cancel', ButtonLayoutDisplay.SECONDARY)
]);

dialogPopup.openDialog$().subscribe(resp => {
  if (resp.clickedButtonID === 'submit') {
  }
});

Here is NgxPopupTooltipExample source code :

import {Component} from '@angular/core';
import {MatTooltipModule} from '@angular/material/tooltip';

@component({
standalone: true,
selector: 'ngxpopup-tooltip-example',
template: <div style="width:100%; height:100%;" matTooltip="Tooltip test ...">foo, bar, baz ...</div>,
imports: [MatTooltipModule],
})
export class NgxPopupTooltipExample {}

Tooltip is not shown when the dialog is opened ... Is it a known issue ?

Styling does not work

I have tried to update colorlist in global config, but it does not work.

Check stackblitz: https://stackblitz.com/edit/minimal-confirm-box-s13g4b

I think the YES event on confirmation popup emits twice

Firstly thanks for a great library. Works beautifully. Easy to understand too!

For the quick start confirmation popup, I copy pasted the code almost identically...but for me the YES event fires twice?

So I had to put a take(1) to prevent it:

    this.confirmBox.openConfirmBox$().pipe(take(1)).subscribe(resp => {
      if (resp.Success) {
        // save to api and send to customer
        this.updateOnApi();
      }
    });

Maybe it's because in your code you immediately unsubscribe?

I think maybe the reason you immediately unsubscribe is so you can have multiple popups on the same page without them sending events to one another, and only the one that was opened. I only just thought of that!

Support for Angular 15

Hello, I want to use the library using Angular 15 and Standalone component, but it throws the following error

this is the main.ts file configuration:

The problem occurs when trying to inject NgxUiLoaderService

Close All on Page Changes

Thanks for this fantastic package. My app pops up info toast message for some pages, and leaves them up for N seconds. However, if the user goes to another page, the message remains displayed. Is there a way to hide all existing messages, or some sort of handle to grab that will allow for closing when changing components?

	public postInstructions(message: string, durationMs: number) {
		const newToastNotification = new ToastNotificationInitializer();
		newToastNotification.setTitle('FYI');
		newToastNotification.setMessage(message);
		newToastNotification.setConfig({
			autoCloseDelay: durationMs,
			textPosition: 'left',
			layoutType: DialogLayoutDisplay.INFO,
			toastUserViewType: ToastUserViewTypeEnum.STANDARD,
			animationIn: AppearanceAnimation.SLIDE_IN_DOWN,
			animationOut: DisappearanceAnimation.SLIDE_OUT_LEFT,
			toastPosition: ToastPositionEnum.TOP_LEFT,
		});
		newToastNotification.openToastNotification$();
	}

Separation of styles support for theming

Styles needs to be separated from final bundle so custom themeing can be made.

Styles will incluse SCSS import and css import options.

Option for custom icon css class name

Confirm box and toast will have option for binding custom class name for font icons.

Unable to install

I am unable to install ngx-awesome-popup

D:\development\workspaces\lwwork\joulez-ui>npm i @costlydeveloper/ngx-awesome-popup
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rxjs
npm ERR! rxjs@"~6.6.0" from the root project
npm ERR! peer rxjs@"^6.5.3" from @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~12.1.0" from the root project
npm ERR! peer @angular/common@">8.0.0" from @costlydeveloper/[email protected]
npm ERR! node_modules/@costlydeveloper/ngx-awesome-popup
npm ERR! @costlydeveloper/ngx-awesome-popup@"" from the root project
npm ERR! 1 more (@angular/core)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@">6.." from @costlydeveloper/[email protected]
npm ERR! node_modules/@costlydeveloper/ngx-awesome-popup
npm ERR! @costlydeveloper/ngx-awesome-popup@"" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Agnihotra\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Agnihotra\AppData\Local\npm-cache_logs\2021-10-29T03_15_38_186Z-debug.log

Toast Disappears When Moving Mouse Over It

Thanks a lot for this library. It's really easy to use and works very well.

I found the "Toast" will disappear when moving mouse over it. It can be reproduced via the demo as well.

Support Angular 15

Hello, the library cannot be used in angular 15, making use of the "inject" function

Can't import the named export 'XXX from non EcmaScript module (only default export is available)

I can't build an application with this module. My environment is as follows:
`Angular CLI: 11.2.18
Node: 10.19.0
OS: linux x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1102.18
@angular-devkit/build-angular 0.1102.18
@angular-devkit/core 11.2.18
@angular-devkit/schematics 11.2.18
@angular/cdk 11.2.13
@angular/cli 11.2.18
@angular/material 11.2.13
@schematics/angular 11.2.18
@schematics/update 0.1102.18
rxjs 6.6.7
typescript 4.1.5
`

I build an application with:
ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path --build-optimizer

Before importing ngx-awesome-popup I was able to build and run this application. After setting things like in demo page, I got bunch of similar errors in build stage (output shortened:
`> @0.0.0 prebuild /...

ts-node -O '{"module": "commonjs"}' git.version.ts
version: '0.0.0', revision: '...', branch: '...'
@0.0.0 build /...
ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path --build-optimizer
Generating browser application bundles...
✔ Browser application bundle generation complete.
Warning: /.../src/app/app.module.ts depends on 'hammerjs'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Error: ./node_modules/@costlydeveloper/ngx-awesome-popup/fesm2015/costlydeveloper-ngx-awesome-popup.mjs 3238:12-29
Can't import the named export 'ApplicationRef' from non EcmaScript module (only default export is available)
at HarmonyImportSpecifierDependency._getErrors (/.../node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:88:6)
at HarmonyImportSpecifierDependency.getErrors (/.../node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
at Compilation.reportDependencyErrorsAndWarnings (/.../node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:1463:22)
at hooks.finishModules.callAsync.err (/.../node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:1258:10)
at _next0 (eval at create (/.../node_modules/tapable/lib/HookCodeFactory.js:33:10), :43:1)
at _promise0.then._result0 (eval at create (/.../node_modules/tapable/lib/HookCodeFactory.js:33:10), :57:1)
at process._tickCallback (internal/process/next_tick.js:68:7)
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts
...
Error: ./node_modules/@costlydeveloper/ngx-awesome-popup/fesm2015/costlydeveloper-ngx-awesome-popup.mjs 3630:31-46
Can't import the named export 'BehaviorSubject' from non EcmaScript module (only default export is available)
at HarmonyImportSpecifierDependency._getErrors (/.../node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:88:6)
at HarmonyImportSpecifierDependency.getErrors (/.../node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
at Compilation.reportDependencyErrorsAndWarnings (/.../node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:1463:22)
at hooks.finishModules.callAsync.err (/.../node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:1258:10)
at _next0 (eval at create (/.../node_modules/tapable/lib/HookCodeFactory.js:33:10), :43:1)
at _promise0.then._result0 (eval at create (/.../node_modules/tapable/lib/HookCodeFactory.js:33:10), :57:1)
at process._tickCallback (internal/process/next_tick.js:68:7)
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts`

Looks like the core issue here is Can't import the named export 'XXX' from non EcmaScript module (only default export is available)

Change naming convention to camelCase

Discussed in #24

^{Originally posted by mgrtomasjurik December 1, 2021}
Hello,
please could you adjust the code so it passes the lint code analyzer - lowerCamelCase rule?
Thank you 😀👍

Here is a Google typescript styleguide with the lowerCamelCase rule https://google.github.io/styleguide/tsguide.html#identifiers

In this case, the code for app.module.ts doesn't comply with the lowerCamelCase naming conventions for properties.
Instead of this:
// FROM HERE; NGX-AWESOME-POPUP
NgxAwesomePopupModule.forRoot({
ColorList: {
Success: '#3caea3', // optional
Info: '#2f8ee5', // optional
Warning: '#ffc107', // optional
...

It should be
// FROM HERE; NGX-AWESOME-POPUP
NgxAwesomePopupModule.forRoot({
colorList: {
success: '#3caea3', // optional
info: '#2f8ee5', // optional
warning: '#ffc107', // optional
etc....

Similar error appears when setting up the ToastNotificationInitializer
Instead of...
// Choose layout color type
newToastNotification.setConfig({
AutoCloseDelay: 5000, // optional
TextPosition: 'left', // optional
LayoutType: DialogLayoutDisplay.SUCCESS, // SUCCESS | INFO | NONE | DANGER | WARNING
ProgressBar: ToastProgressBarEnum.NONE, // INCREASE | DECREASE | NONE
ToastUserViewType: ToastUserViewTypeEnum.SIMPLE, // STANDARD | SIMPLE
...

...it should be:
// Choose layout color type
newToastNotification.setConfig({
autoCloseDelay: 5000, // optional
textPosition: 'left', // optional
layoutType: DialogLayoutDisplay.SUCCESS, // SUCCESS | INFO | NONE | DANGER | WARNING
progressBar: ToastProgressBarEnum.NONE, // INCREASE | DECREASE | NONE
toastUserViewType: ToastUserViewTypeEnum.SIMPLE, // STANDARD | SIMPLE
etc...

Custom color enums option for box and buttons.

5 custom color options will be added in enums, it will support typescript color generation as well as scss variables.

Toast notification when appearing animation is set to disabled

In the toast module, when animation is set to none, the toast message not shows at all.

Changing the Font Size

Is it possible to make the font size configurable? Currently, it seems that I have to use both "::ng-deep" and "!important" to change the font size, eg:

  ::ng-deep .text-wrapper {
    font-size: 12px !important;
  }