npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-alert-modal

v1.0.1

Published

Angular modal/Alert/Popup

Downloads

6

Readme

NgxAlertModal

Angular modal/Alert/Popup

Simple popup modal like sweetalert2

📦Demo

Preview Demo

🗃️ Install

  • NPM: npm i ngx-alert-modal
  • YARN: yarn add ngx-alert-modal

Standalone

🖥️Usage

💬For open popup

import { Component, OnInit } from '@angular/core';
import { NgxAlertModalService } from 'ngx-alert-modal';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  constructor(
    private alert: NgxAlertModalService
  ) { }

  ngOnInit(): void {
  }


  openPopup() {
    this.alert.show({
      title: 'Message Title',
      text: 'Description',
      icon: 'warning',
      showConfirmButton: true,
      showCancelButton: true,
    }).then(r => {
      console.log('result=', r);
    });
  }

}

Setting Global Options

Pass values to NgxAlertModalModule.forRoot() or provider to set global options.

  • Module based
// app NgModule
imports: [
  NgxAlertModalModule.forRoot({
    confirmButtonText: 'تائید',
    cancelButtonText: 'انصراف',
    ...
  }),
],
  • Provider
import { NGX_ALERT_CONFIG } from 'ngx-alert-modal';

// app NgModule
providers:[
   {
      provide: NGX_ALERT_CONFIG, useValue: {
          confirmButtonText: 'تائید',
          cancelButtonText: 'انصراف',
          ...
      }
    }
]

⚙️Options

export type AlertIcon = 'success' | 'error' | 'warning' | 'info' | 'question'

export class AlertOptions {
    /**
    * The title of the popup
    *
    * @default ''
    */
    title?: string = '';

    /**
     * A description for the popup.
     *
     * @default ''
     */
    text?: string = '';

    /**
     * A HTML description for the popup.
     *
     * [Security] we does NOT sanitize this parameter. It is the developer's responsibility
     * to escape any user input when using the `html` option, so XSS attacks would be prevented.
     *
     * @default ''
     */
    html?: string | HTMLElement = '';


    /**
     * Whether or not  should show a full screen click-to-dismiss backdrop.
     * Either a boolean value or a css background value (hex, rgb, rgba, url, etc.)
     *
     * @default true
     */
    backdrop?: boolean = true;


    icon?: AlertIcon;

    /**
     * Popup width, including paddings (`box-sizing: border-box`).
     *
     * @default undefined
     * @description ❌⚠️NOT Implemented!⚠️❌
     */
    width?: number | string


    /**
     * If set to `false`, the user can't dismiss the popup by clicking outside it.
     *
     * @default true
     */
    allowOutsideClick?: boolean = true;

    /**
     * If set to `false`, the user can't dismiss the popup by pressing the Escape key.
     *
     * @default true
     */
    allowEscapeKey?: boolean = true;

    /**
     * If set to `false`, the user can't confirm the popup by pressing the Enter or Space keys,
     * unless they manually focus the confirm button.
     *
     * @default true
     */
    allowEnterKey?: boolean = true;


    /**
     * If set to `false`, the "Confirm" button will not be shown.
     *
     * @default true
     */
    showConfirmButton?: boolean = true;

    /**
     * If set to `true`, the "Deny" button will be shown, which the user can click on to deny the popup.
     *
     * @default false
     */
    showDenyButton?: boolean = false;

    /**
     * If set to `true`, the "Cancel" button will be shown, which the user can click on to dismiss the popup.
     *
     * @default false
     */
    showCancelButton?: boolean = true;

    /**
     * Use this to change the text on the "Confirm" button.
     *
     * @default 'OK'
     */
    confirmButtonText?: string = 'Ok';

    /**
     * Use this to change the text on the "Confirm" button.
     *
     * @default 'No'
     */
    denyButtonText?: string = 'No';

    /**
     * Use this to change the text on the "Cancel" button.
     *
     * @default 'Cancel'
     */
    cancelButtonText?: string = 'Cancel';

    /**
     * Use this to change the background color of the "Confirm" button.
     *
     * @default undefined
     * @description ❌⚠️NOT Implemented!⚠️❌
     */
    confirmButtonColor?: string;

    /**
     * Use this to change the background color of the "Deny" button.
     *
     * @default undefined
     * @description ❌⚠️NOT Implemented!⚠️❌
     */
    denyButtonColor?: string;

    /**
     * Use this to change the background color of the "Cancel" button.
     *
     * @default undefined
     * @description ❌⚠️NOT Implemented!⚠️❌
     */
    cancelButtonColor?: string;

    /**
     * Use this to change the `aria-label` for the "Confirm" button.
     *
     * @default ''
     */
    confirmButtonAriaLabel?: string = '';

    /**
     * Use this to change the `aria-label` for the "Deny" button.
     *
     * @default ''
     */
    denyButtonAriaLabel?: string = '';

    /**
     * Use this to change the `aria-label` for the "Cancel" button.
     *
     * @default ''
     */
    cancelButtonAriaLabel?: string = '';


    /**
     * Set to `true` if you want to invert default buttons positions.
     *
     * @default false
     * @description ❌⚠️NOT Implemented!⚠️❌
     */
    reverseButtons?: boolean = false;



    /**
     * Set to `true` to show close button.
     *
     * @default false
     */
    showCloseButton?: boolean = false;


    containerClass?: string = '';
}

Author

💻Mohammadreza samani | FrontEnd Developer

❤️Buy me a coffee 😉