xiaojundebug / ngx-popup

An angular popup component that can customize animation.

NgxPopup

An angular popup component that can customize animation.

development environment: angular 8.2.14

 

👉 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)