Nitro Popup

This Documentation is incomplete, please check this link for detailed Documentation.

Nitro Popup can be used for Popups / Modals / Dialog Boxes and even also this can be used as context menu also. Inbuilt support added for overriding context menus.

Features:

1. Light weight
2. Fully configurable with just one JSON object for each Popup
3. Layouts & Templates can be controlled using <ng-template>
4. Easy Override with CSS styles
5. In-Built Animation Support

Usage

app.module.ts

import { PopupModule } from 'nitro-popup';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    PopupModule
    // ...
  ]
})

some.component.ts

  import { PopupService } from 'nitro-popup';

  // ...
  export class SomeComponent {
    constructor(
      public popupService: PopupService
    ) {
    }

    triggerPopupOpen():void {
      openPopup({
        event: new Event('open'),
        template: popupRef
      });
    }

    openPopup(opt: any): void {
      this.popupService.open(opt);
    }

    closePopup(opt: any): void {
      this.popupService.close(opt);
    }
  }

some.component.html - SIMPLE USE Compact

  <button (click)="openPopup({
    event: $event,
    template: popupRef
  })" class="btn">OPEN POPUP</button>

  <nitro-popup #popupRef [config]="{
      width: '600px',
      height: '600px',
      id: 'popupYourID',
      contentLayout: popupContentLayout
    }">
  </nitro-popup>

  <ng-template #popupContentLayout>
    <ng-container *ngTemplateOutlet="profileImage"></ng-container>
  </ng-template>

  <ng-template #popupHeaderLayout>
    <span class="title">Title</span>
    <button class="btn close" (click)="closePopup($event)">x</button>
  </ng-template>
  <ng-template #popupFooterLayout>
    Footer
  </ng-template>
  <ng-template #popupSideLayout>
    <nav>
      <ul>
      <li>
        <button>Menu 1</button>
      </li>
      <li>
        <button>Menu 2</button>
      </li>
    </ul>
    </nav>
  </ng-template>

some.component.html - SIMPLE USE with Animations and all Templates

  <button (click)="openPopup({
    event: $event,
    template: popupRef
  })" class="btn">OPEN POPUP</button>

  <nitro-popup #popupRef [config]="{
      width: '600px',
      height: '600px',
      id: 'popupDemo',
      class: 'popupYourStyleClass or Classes',
      animateIn: 'zoomIn',
      animateOut: 'zoomOut'
      sideLayout: popupSideLayout,
      headerLayout: popupHeaderLayout,
      footerLayout: popupFooterLayout,
      contentLayout: popupContentLayout
    }">
  </nitro-popup>

  <ng-template #popupContentLayout>
    Popup Contents
  </ng-template>

  <ng-template #popupHeaderLayout>
    <span class="title">Title</span>
    <button class="btn close" (click)="closePopup($event)">x</button>
  </ng-template>
  <ng-template #popupFooterLayout>
    Footer
  </ng-template>
  <ng-template #popupSideLayout>
    <nav class="menu">
      <ul>
        <li>
          <button>Menu 1</button>
        </li>
        <li>
          <button>Menu 2</button>
        </li>
      </ul>
    </nav>
  </ng-template>

some.component.html - Growing from a target element

  <button #btnRef (click)="openPopup({
    event: $event,
    template: popupRef
  })" class="btn">OPEN POPUP</button>

  <nitro-popup #popupRef [config]="{
      delay: 500,
      origin: btnRef,
      width: '100%',
      height: '100%',
      id: 'popupDemo',
      class: 'popupStyle',
      animateIn: 'pulse',
      animateOut: 'zoomOut',
      css: {
        'max-width': '100vw',
        'max-height': '100vh'
      },
      contentLayout: popupContentLayout
    }">
  </nitro-popup>

  <ng-template #popupContentLayout>
    <ng-container *ngTemplateOutlet="profileImage"></ng-container>
  </ng-template>

  <!-- <ng-template #popupHeaderLayout>
    <span class="title">Title</span>
    <button class="btn close" (click)="closePopup($event)">x</button>
  </ng-template>
  <ng-template #popupFooterLayout>
    Footer
  </ng-template>
  <ng-template #popupSideLayout>
    <nav>
      <ul>
      <li>
        <button>Menu 1</button>
      </li>
      <li>
        <button>Menu 2</button>
      </li>
    </ul>
    </nav>
  </ng-template> -->

How to override context menu and open a custom Menu

  <div class="customContextMenu" (contextmenu)="openPopup({
      event: $event,
      template: menu
    })" style="width: 100%; height: 100%; top:0; left:0; position: fixed;background: rgba(0,0,0,0.2)">
    Right Button Click this area to get the CUSTOM MENU
    </div>

  <nitro-popup #menu [config]="{
    width: 'auto',
    height: 'auto',
    id: 'popupMenu',
    class: 'popupMenu',
    contentLayout: menuLayout
  }">
    <ng-template #menuLayout>
      <a href="javascript:;">Menu 1</a>
      <a href="javascript:;">Menu 2</a>
      <a href="javascript:;">Menu 3</a>
      <a href="javascript:;">Menu 4</a>
    </ng-template>
  </nitro-popup>

API:

|Name|Type|Default|Description| |---|---|---|---| |id|String| "" | IDThis will set an ID for the popup template (Keep it unique) Eg.:<nitro-popup [config]="{id: 'popupName'...}"></nitro-popup>Accepted Values:<any_string>ID String will also be added as a class for the popup also.| |width & height|String| 100% | Width and height of popupSet width and height of the popup. The width can be of %, px or auto values as a stringEg.:<nitro-popup [config]="{width: '600px', height: 'auto'}"></nitro-popup>| |css|JSON| "" | Add custom CSSCustom css will be applied as inline style to the PopupEg.:<nitro-popup [config]="{ css: {'max-width': '100vw','max-height': '100vh'}}"></nitro-popup>| |animateIn|String| "" | Class for Animate In AnimateIn Class will be applied to the Popup at opening eventEg.:<nitro-popup [config]="{ animateIn: 'zoomIn'}"></nitro-popup>| |animateOut|String| "" | Class for Animate OutAnimateOut Class will be applied to the Popup at opening eventEg.:<nitro-popup [config]="{ animateOut: 'zoomOut' }"></nitro-popup>| |level|Number| 0 | Updating the Layer OrderThe default z-index of Popup is 1050 and the level value will be added with 1050.NB: You can also decrease the z-index value by giving negative value as levelEg.:<nitro-popup [config]="{ level: '-1049' }"></nitro-popup>Will set the popup layer z-index: 1. | |overlay| String / boolean| true | Various Overlay TypesToggle Overlay Show/Hide or blocks/allow clicks outside the popupAccepted Values are true, false, transparent, none, transparent_none Eg.:<nitro-popup [config]="{overlay: 'transparent'}"></nitro-popup>| |headerLayout|TemplateRef| null | Header TemplateHTML Template for headerEg.:<nitro-popup [config]="{headerLayout: headerTemplateElementRef}"></nitro-popup>| |footerLayout|TemplateRef| null | Footer TemplateHTML Template for footerEg.:<nitro-popup [config]="{footerLayout: footerTemplateElementRef}"></nitro-popup>| |contentLayout|TemplateRef| null | Content TemplateHTML Template for contentEg.:<nitro-popup [config]="{contentLayout: contentTemplateElementRef}"></nitro-popup>| |sideLayout|TemplateRef| null | Left Side TemplateHTML Template for sideEg.:<nitro-popup [config]="{sideLayout: sideTemplateElementRef}"></nitro-popup>| |customLayout|TemplateRef| null | custom Layout TemplateCustom HTML Template for PopupEg.:<nitro-popup [config]="{customLayout: sideTemplateElementRef}"></nitro-popup>|

This library was generated with Angular CLI version 17.1.3.