https://github.com/xiaojundebug/ngx-popup

An angular popup component that can customize animation.
https://github.com/xiaojundebug/ngx-popup

angular ng popup

Last synced: 21 days ago
JSON representation

An angular popup component that can customize animation.

• Host: GitHub
• URL: https://github.com/xiaojundebug/ngx-popup
• Owner: xiaojundebug
• Created: 2020-05-30T14:55:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T18:41:01.000Z (almost 2 years ago)
• Last Synced: 2024-12-02T00:48:11.730Z (25 days ago)
• Topics: angular, ng, popup
• Language: TypeScript
• Homepage: https://xiaojundebug.github.io/ngx-popup/
• Size: 5.5 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NgxPopup

An angular popup component that can customize animation.

_development environment: angular 8.2.14_



   



👉 [Demo](https://stackblitz.com/edit/ngx-popup-demo)

## 🚀 Install

```bash

npm i @ciri/ngx-popup

```

## 🎉 Quick Start

Add it to your module:

```typescript

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

import { PopupModule } from '@ciri/ngx-popup'

@NgModule({

  // ...

  imports: [

    // ...

    BrowserAnimationsModule,

    PopupModule

  ],

})

```

Add to view:

```html

  
hello world


```

## 📌 Set Position

```html

```

## 🎁 Custom Animation

```typescript

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

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

@Component({

  selector: 'app-root',

  template: `

    

      


    


    show 

  `

})

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