nitro-popup v0.2.0-ng17

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:

This library was generated with Angular CLI version 17.1.3.