{"id":22406711,"url":"https://github.com/xiaojundebug/ngx-popup","last_synced_at":"2025-07-31T19:31:26.553Z","repository":{"id":38506637,"uuid":"268100991","full_name":"xiaojundebug/ngx-popup","owner":"xiaojundebug","description":"An angular popup component that can customize animation.","archived":false,"fork":false,"pushed_at":"2023-01-07T18:41:01.000Z","size":5763,"stargazers_count":4,"open_issues_count":24,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-02T00:48:11.730Z","etag":null,"topics":["angular","ng","popup"],"latest_commit_sha":null,"homepage":"https://xiaojundebug.github.io/ngx-popup/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaojundebug.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-30T14:55:50.000Z","updated_at":"2023-07-31T10:00:54.000Z","dependencies_parsed_at":"2023-02-07T21:02:09.458Z","dependency_job_id":null,"html_url":"https://github.com/xiaojundebug/ngx-popup","commit_stats":null,"previous_names":["xiaojun1994/ngx-popup"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaojundebug%2Fngx-popup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaojundebug%2Fngx-popup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaojundebug%2Fngx-popup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaojundebug%2Fngx-popup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaojundebug","download_url":"https://codeload.github.com/xiaojundebug/ngx-popup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228283576,"owners_count":17896266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","ng","popup"],"created_at":"2024-12-05T11:09:51.356Z","updated_at":"2024-12-05T11:09:52.332Z","avatar_url":"https://github.com/xiaojundebug.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxPopup\n\nAn angular popup component that can customize animation.\n\n_development environment: angular 8.2.14_\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"travis\" src=\"https://travis-ci.org/xiaojun1994/ngx-popup.svg?branch=master\"\u003e\u0026nbsp;\n\u003c/p\u003e\n\n👉 [Demo](https://stackblitz.com/edit/ngx-popup-demo)\n\n## 🚀 Install\n\n```bash\nnpm i @ciri/ngx-popup\n```\n\n## 🎉 Quick Start\n\nAdd it to your module:\n\n```typescript\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations'\nimport { PopupModule } from '@ciri/ngx-popup'\n\n@NgModule({\n  // ...\n  imports: [\n    // ...\n    BrowserAnimationsModule,\n    PopupModule\n  ],\n})\n```\n\nAdd to view:\n\n```html\n\u003cngx-popup [(ngModel)]=\"visible\"\u003e\n  \u003cdiv style=\"background: #fff; padding: 50px;\"\u003ehello world\u003c/div\u003e\n\u003c/ngx-popup\u003e\n```\n\n## 📌 Set Position\n\n```html\n\u003cngx-popup [(ngModel)]=\"visible\" position=\"bottom\"\u003e\u003c/ngx-popup\u003e\n```\n\n## 🎁 Custom Animation\n\n```typescript\nimport { Component, OnInit } from '@angular/core'\nimport { animate, style } from '@angular/animations'\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cngx-popup [(ngModel)]=\"visible\" [animations]=\"animations\"\u003e\n      \u003cdiv style=\"padding: 100px; background: #fff\"\u003e\u003c/div\u003e\n    \u003c/ngx-popup\u003e\n\n    \u003cbutton (click)=\"show()\"\u003eshow\u003c/button\u003e\u0026nbsp;\n  `\n})\nexport class AppComponent implements OnInit {\n  visible = false\n  animations = {\n    enter: [\n      style({ opacity: 0, transform: 'scale(0.7)' }),\n      animate('.3s ease', style({ opacity: 1, transform: 'scale(1)' }))\n    ],\n    leave: [\n      style({ opacity: 1, transform: 'scale(1)' }),\n      animate('.3s ease', style({ opacity: 0, transform: 'scale(0.9)' }))\n    ]\n  }\n\n  constructor() {}\n\n  ngOnInit() {}\n\n  show() {\n    this.visible = true\n  }\n}\n```\n\n## 🍭 Inputs\n\n| Name                | Type    | Default | Description                                 |\n| ------------------- | ------- | ------- | ------------------------------------------- |\n| position            | string  | center  | Can be set to `top` `right` `bottom` `left` |\n| animations          | object  | -       | Custom animation                            |\n| overlay             | boolean | true    | Whether to show overlay                     |\n| overlayOpacity      | number  | 0.5     | Set overlay opacity                         |\n| closeOnClickOverlay | boolean | true    | Whether to close when click overlay         |\n| externalClass       | object  | -       | Custom class, equivalent to [ngClass]       |\n| zIndex              | number  | 9999    | Increasing from 9999                        |\n\n## 🐚 Outputs\n\n| Event        | Description                                                           |\n| ------------ | --------------------------------------------------------------------- |\n| clickOverlay | Triggered when click overlay                                          |\n| beforeOpen   | Triggered when before opening (Enter animation has not been executed) |\n| afterOpen    | Triggered when after opening (Enter animation completed)              |\n| beforeClose  | Triggered when before closing (Leave animation has not been executed) |\n| afterClose   | Triggered when after closing (Leave animation completed)              |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaojundebug%2Fngx-popup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaojundebug%2Fngx-popup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaojundebug%2Fngx-popup/lists"}