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	""	ID This 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 popup Set width and height of the popup. The width can be of %, px or auto values as a string Eg.: <nitro-popup [config]="{width: '600px', height: 'auto'}"></nitro-popup>
css	JSON	""	Add custom CSS Custom css will be applied as inline style to the Popup Eg.: <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 event Eg.: <nitro-popup [config]="{ animateIn: 'zoomIn'}"></nitro-popup>
animateOut	String	""	Class for Animate Out AnimateOut Class will be applied to the Popup at opening event Eg.: <nitro-popup [config]="{ animateOut: 'zoomOut' }"></nitro-popup>
level	Number	0	Updating the Layer Order The 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 level Eg.: <nitro-popup [config]="{ level: '-1049' }"></nitro-popup> Will set the popup layer z-index: 1.
overlay	String / boolean	true	Various Overlay Types Toggle Overlay Show/Hide or blocks/allow clicks outside the popup Accepted Values are true, false, transparent, none, transparent_none Eg.: <nitro-popup [config]="{overlay: 'transparent'}"></nitro-popup>
headerLayout	TemplateRef	null	Header Template HTML Template for header Eg.: <nitro-popup [config]="{headerLayout: headerTemplateElementRef}"></nitro-popup>
footerLayout	TemplateRef	null	Footer Template HTML Template for footer Eg.: <nitro-popup [config]="{footerLayout: footerTemplateElementRef}"></nitro-popup>
contentLayout	TemplateRef	null	Content Template HTML Template for content Eg.: <nitro-popup [config]="{contentLayout: contentTemplateElementRef}"></nitro-popup>
sideLayout	TemplateRef	null	Left Side Template HTML Template for side Eg.: <nitro-popup [config]="{sideLayout: sideTemplateElementRef}"></nitro-popup>
customLayout	TemplateRef	null	custom Layout Template Custom HTML Template for Popup Eg.: <nitro-popup [config]="{customLayout: sideTemplateElementRef}"></nitro-popup>

This library was generated with Angular CLI version 17.1.3.