@ciri/ngx-popup v0.1.5

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

🐚 Outputs