/ngx-popup

An angular popup component that can customize animation.

Primary LanguageTypeScript

NgxPopup

An angular popup component that can customize animation.

development environment: angular 8.2.14

travis 

👉 Demo

🚀 Install

npm i @ciri/ngx-popup

🎉 Quick Start

Add it to your module:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { PopupModule } from '@ciri/ngx-popup'

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

Add to view:

<ngx-popup [(ngModel)]="visible">
  <div style="background: #fff; padding: 50px;">hello world</div>
</ngx-popup>

📌 Set Position

<ngx-popup [(ngModel)]="visible" position="bottom"></ngx-popup>

🎁 Custom Animation

import { Component, OnInit } from '@angular/core'
import { animate, style } from '@angular/animations'

@Component({
  selector: 'app-root',
  template: `
    <ngx-popup [(ngModel)]="visible" [animations]="animations">
      <div style="padding: 100px; background: #fff"></div>
    </ngx-popup>

    <button (click)="show()">show</button>&nbsp;
  `
})
export class AppComponent implements OnInit {
  visible = false
  animations = {
    enter: [
      style({ opacity: 0, transform: 'scale(0.7)' }),
      animate('.3s ease', style({ opacity: 1, transform: 'scale(1)' }))
    ],
    leave: [
      style({ opacity: 1, transform: 'scale(1)' }),
      animate('.3s ease', style({ opacity: 0, transform: 'scale(0.9)' }))
    ]
  }

  constructor() {}

  ngOnInit() {}

  show() {
    this.visible = true
  }
}

🍭 Inputs

Name Type Default Description
position string center Can be set to top right bottom left
animations object - Custom animation
overlay boolean true Whether to show overlay
overlayOpacity number 0.5 Set overlay opacity
closeOnClickOverlay boolean true Whether to close when click overlay
externalClass object - Custom class, equivalent to [ngClass]
zIndex number 9999 Increasing from 9999

🐚 Outputs

Event Description
clickOverlay Triggered when click overlay
beforeOpen Triggered when before opening (Enter animation has not been executed)
afterOpen Triggered when after opening (Enter animation completed)
beforeClose Triggered when before closing (Leave animation has not been executed)
afterClose Triggered when after closing (Leave animation completed)