An angular popup component that can customize animation.
development environment: angular 8.2.14
π Demo
npm i @ciri/ngx-popup
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>
<ngx-popup [(ngModel)]="visible" position="bottom"></ngx-popup>
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>
`
})
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
}
}
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 |
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) |