{"id":13497288,"url":"https://github.com/sweetalert2/ngx-sweetalert2","last_synced_at":"2025-05-14T05:10:22.831Z","repository":{"id":38454653,"uuid":"78864820","full_name":"sweetalert2/ngx-sweetalert2","owner":"sweetalert2","description":"Declarative, reactive, and template-driven SweetAlert2 integration for Angular","archived":false,"fork":false,"pushed_at":"2025-01-26T13:55:35.000Z","size":2928,"stargazers_count":667,"open_issues_count":0,"forks_count":98,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-05-08T20:18:17.669Z","etag":null,"topics":["alert","angular","dialog","modal","sweetalert","sweetalert2","ux"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sweetalert2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-13T16:23:17.000Z","updated_at":"2025-05-01T19:05:01.000Z","dependencies_parsed_at":"2024-01-16T09:55:58.848Z","dependency_job_id":"d6939bcf-ebbd-4679-a741-3d8e72b6cbff","html_url":"https://github.com/sweetalert2/ngx-sweetalert2","commit_stats":{"total_commits":254,"total_committers":17,"mean_commits":"14.941176470588236","dds":0.3976377952755905,"last_synced_commit":"4a349dd5510888ab28fa5cbdf77639a06736714a"},"previous_names":["toverux/ngsweetalert2"],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sweetalert2%2Fngx-sweetalert2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sweetalert2%2Fngx-sweetalert2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sweetalert2%2Fngx-sweetalert2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sweetalert2%2Fngx-sweetalert2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sweetalert2","download_url":"https://codeload.github.com/sweetalert2/ngx-sweetalert2/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076849,"owners_count":22010611,"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":["alert","angular","dialog","modal","sweetalert","sweetalert2","ux"],"created_at":"2024-07-31T20:00:28.159Z","updated_at":"2025-05-14T05:10:22.778Z","avatar_url":"https://github.com/sweetalert2.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Third Party Components"],"sub_categories":["Uncategorized","Notifications"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://sweetalert2.github.io\"\u003e\n    \u003cimg src=\"ngx-sweetalert2-logo.png\" alt=\"SweetAlert2\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e@sweetalert2/ngx-sweetalert2\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  Official \u003ca href=\"https://sweetalert2.github.io\"\u003eSweetAlert2\u003c/a\u003e integration for Angular\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@sweetalert2/ngx-sweetalert2\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/@sweetalert2/ngx-sweetalert2.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/sweetalert2/ngx-sweetalert2/actions\"\u003e\u003cimg alt=\"Build Status\" src=\"https://github.com/sweetalert2/ngx-sweetalert2/workflows/build/badge.svg\"\u003e\u003c/a\u003e\n    \u003ca href=\"LICENSE\"\u003e\u003cimg alt=\"license\" src=\"https://img.shields.io/github/license/sweetalert2/ngx-sweetalert2.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\nThis is not a regular API wrapper for SweetAlert (which already works very well alone), it intends to provide Angular-esque utilities on top of it.\n\n:point_right: **Before posting an issue**, please check that the problem isn't on SweetAlert's side.\n\n----------------\n\n### Quick start\n\n - [Installation \u0026 Usage](#package-installation--usage)\n - [`[swal]` directive](#swaldirective) — for simple, one-liner dialogs\n - [`\u003cswal\u003e` component](#swalcomponent) — for advanced use cases and extended Swal2 API coverage\n - [`*swalPortal` directive](#swalportaldirective) — use Angular templates in `\u003cswal\u003e`\n\n### Wiki recipes\n\n - 🔌 [All possible ways of firing a modal and controlling its visibility](https://github.com/sweetalert2/ngx-sweetalert2/wiki/All-possible-ways-of-firing-a-modal-and-controlling-its-visibility)\n - :wrench: [Setting global defaults (SweetAlert2 mixins)](https://github.com/sweetalert2/ngx-sweetalert2/wiki/Setting-global-defaults-(SweetAlert2-mixins))\n - :art: [Use a theme from @sweetalert2/themes (and or customize SCSS variables)\n](https://github.com/sweetalert2/ngx-sweetalert2/wiki/Use-a-theme-from-@sweetalert2-themes-(and-or-customize-SCSS-variables))\n\n----------------\n\n## :package: Installation \u0026 Usage\n\n1) Install _ngx-sweetalert2_ and _sweetalert2_ via the npm registry:\n\n```sh\nnpm install sweetalert2 @sweetalert2/ngx-sweetalert2\n```\n\n:arrow_double_up: Always upgrade SweetAlert2 when you upgrade ngx-sweetalert2. The latter is statically linked with SweetAlert2's type definitions.\n\n## Angular and SweetAlert2 versions compatibility table\n\n| Angular version | Latest compatible version range                                                                                                                          | Required SweetAlert2 version range |\n|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------|\n| Angular 18+     | @sweetalert2/ngx-sweetalert2@**^13.0.0** (current)                                                                                                       | sweetalert2@**^11.0.0**            |\n| Angular 14-17   | [@sweetalert2/ngx-sweetalert2@**^12.0.0**](https://github.com/sweetalert2/ngx-sweetalert2/tree/v12.0.0#readme)                                           | sweetalert2@**^11.0.0**            |\n| Angular 12, 13  | [@sweetalert2/ngx-sweetalert2@**^11.0.0**](https://github.com/sweetalert2/ngx-sweetalert2/tree/v11.0.0#readme)                                           | sweetalert2@**^11.0.0**            |\n| Angular 9 to 11 | [@sweetalert2/ngx-sweetalert2@**~9.0.0**](https://github.com/sweetalert2/ngx-sweetalert2/tree/v9.0.0#readme)                                             | sweetalert2@**^10.8.0**            |\n| Angular 8       | [@sweetalert2/ngx-sweetalert2@**~7.3.0**](https://github.com/sweetalert2/ngx-sweetalert2/tree/v7.3.0#readme) (:warning: NOT ~7.4.0, broken AoT metadata) | sweetalert2@**^9.7.0**             |\n| Angular 7       | [@sweetalert2/ngx-sweetalert2@**^5.1.0**](https://github.com/sweetalert2/ngx-sweetalert2/tree/v5.1.0#readme)                                             | sweetalert2@**^8.5.0**             |\n| Angular 6       | [@sweetalert2/ngx-sweetalert2@**^5.1.0**](https://github.com/sweetalert2/ngx-sweetalert2/tree/v5.1.0#readme)                                             | sweetalert2@**^8.5.0**             |\n| Angular 5       | [@sweetalert2/ngx-sweetalert2@**^5.1.0**](https://github.com/sweetalert2/ngx-sweetalert2/tree/v5.1.0#readme)                                             | sweetalert2@**^8.5.0**             |\n| Angular 4       | [@toverux/ngx-sweetalert2@**^3.4.0**](https://github.com/sweetalert2/ngx-sweetalert2/tree/v3.4.0#readme)                                                 | sweetalert2@**^7.15.1**            |\n| Angular 2       | Try Angular 4 versions requirements, or older versions like @toverux/ngsweetalert2                                                                       | unknown                            |\n\n2) Import the module:\n\n```typescript\nimport { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';\n\n@NgModule({\n    //=\u003e Basic usage (forRoot can also take options, see the wiki)\n    imports: [SweetAlert2Module.forRoot()],\n\n    //=\u003e In submodules only:\n    imports: [SweetAlert2Module],\n\n    //=\u003e In submodules only, overriding options from your root module:\n    imports: [SweetAlert2Module.forChild({ /* options */ })]\n})\nexport class AppModule {\n}\n```\n\nThat's it! By default, SweetAlert2 will be lazy-loaded, only when needed, from your local dependency of `sweetalert2`, using the `import()` syntax under the hood.\n\n## :link: API\n\n### `SwalDirective`\n\nAdd the `[swal]` attribute to an element to show a simple modal when that element is clicked.\n\nTo define the modal contents, you can pass a [`SweetAlertOptions` (provided by sweetalert2)](https://github.com/sweetalert2/sweetalert2/blob/main/sweetalert2.d.ts) object,\nor a simple array of strings, of format `[title: string, text: string (, icon: string)]`.\n\nA simple dialog:\n\n```html\n\u003cbutton [swal]=\"['Oops!', 'This is not implemented yet :/', 'warning']\"\u003e\n  Do it!\n\u003c/button\u003e\n```\n\nMore advanced, with text input, confirmation, denial and dismissal handling:\n\n```html\n\u003cbutton\n  [swal]=\"{ title: 'Save file as...', input: 'text', showDenyButton: true, denyButtonText: 'Don\\'t save', showCancelButton: true }\"\n  (confirm)=\"saveFile($event)\"\n  (deny)=\"handleDenial()\"\n  (dismiss)=\"handleDismiss($event)\"\u003e\n\n  Save\n\u003c/button\u003e\n```\n\n```typescript\nexport class MyComponent {\n  public saveFile(fileName: string): void {\n    // ... save file\n  }\n\n  public handleDenial(): void {\n      // ... don't save file and quit\n  }\n\n  public handleDismiss(dismissMethod: string): void {\n    // dismissMethod can be 'cancel', 'overlay', 'close', and 'timer'\n    // ... do something\n  }\n}\n```\n\nThe directive can also take a reference to a [`\u003cswal\u003e` component](#swalcomponent) for more advanced use cases:\n\n```html\n\u003cbutton [swal]=\"deleteSwal\" (confirm)=\"deleteFile(file)\"\u003e\n  Delete {{ file.name }}\n\u003c/button\u003e\n\n\u003cswal #deleteSwal title=\"Delete {{ file.name }}?\" etc\u003e\u003c/swal\u003e\n```\n\n### `SwalComponent`\n\nThe library also provides a component, that can be useful for advanced use cases, or when you `[swal]`\nhas too many options.\n\nThe component also allows you to use Angular dynamic templates inside the SweetAlert (see the\n[`*swalPortal` directive](#swalportaldirective) for that).\n\nSimple example:\n\n```html\n\u003cswal\n  #deleteSwal\n  title=\"Delete {{ file.name }}?\"\n  text=\"This cannot be undone\"\n  icon=\"question\"\n  [showCancelButton]=\"true\"\n  [focusCancel]=\"true\"\n  (confirm)=\"deleteFile(file)\"\u003e\n\u003c/swal\u003e\n\nWith [swal]:\n\u003cbutton [swal]=\"deleteSwal\"\u003eDelete {{ file.name }}\u003c/button\u003e\n\nOr DIY:\n\u003cbutton (click)=\"deleteSwal.fire()\"\u003eDelete {{ file.name }}\u003c/button\u003e\n```\n\nYou can access the dialog from your TypeScript code-behind like this:\n\n```ts\nclass MyComponent {\n  @ViewChild('deleteSwal')\n  public readonly deleteSwal!: SwalComponent;\n}\n```\n\nYou can pass native SweetAlert2 options via the `swalOptions` input, just in the case you need that:\n\n```html\n\u003cswal [swalOptions]=\"{ confirmButtonText: 'I understand' }\"\u003e\u003c/swal\u003e\n```\n\nBy the way: every \"special\" option, like `swalOptions`, that are not native options from SweetAlert2,\nare prefixed with `swal`.\n\nYou can catch other modal lifecycle events than (confirm), (deny) or (cancel):\n\n```html\n\u003cswal\n  (willOpen)=\"swalWillOpen($event)\"\n  (didOpen)=\"swalDidOpen($event)\"\n  (didRender)=\"swalDidRender($event)\"\n  (willClose)=\"swalWillClose($event)\"\n  (didClose)=\"swalDidClose()\"\n  (didDestroy)=\"swalDidDestroy()\"\u003e\n\u003c/swal\u003e\n```\n\n```typescript\nexport class MyComponent {\n    public swalWillOpen(event: WillOpenEvent): void {\n      // Most events (those using $event in the example above) will let you access the modal native DOM node, like this:\n      console.log(event.modalElement);\n    }\n}\n```\n\n### `SwalPortalDirective`\n\nThe `*swalPortal` structural directive lets you use Angular dynamic templates inside SweetAlerts.\n\nThe name \"portal\" is inspired by React or Angular CDK portals.\nThe directive will replace certain parts of the modal (aka. _swal targets_) with embedded Angular views.\n\nThis allows you to have data binding, change detection, and use every feature of the Angular template syntax\nyou want, just like if the SweetAlert was a normal Angular component (it's not at all).\n\n```html\n\u003cswal title=\"SweetAlert2 Timer\"\u003e\n  \u003cdiv *swalPortal class=\"alert alert-info\"\u003e\n    \u003cstrong\u003e{{ elapsedSeconds }}\u003c/strong\u003e seconds elapsed since the modal was opened.\n  \u003c/div\u003e\n\u003c/swal\u003e\n```\n\nUsing a structural directives allows us to take your content as a template, instantiate it lazily when needed\n(i.e. when the modal is shown), and putting it in a native DOM element that is originally outside the scope of\nyour Angular app.\n\nIn this example we set the main content of the modal, where the `text` property is usually rendered when SweetAlert2\nis in charge.\nYou can also target the title, the footer, or even the confirm button, and more!\n\nYou just have to change the _target_ of the portal (_`content`_ is the default target).\nFirst, inject this little service in your component:\n\n```typescript\nimport { SwalPortalTargets } from '@sweetalert2/ngx-sweetalert2';\n\nexport class MyComponent {\n  public constructor(public readonly swalTargets: SwalPortalTargets) {\n  }\n}\n```\n\nThen, set the appropriate target as the value of `*swalPortal`, here using two portals, the first one\ntargeting the modal's content (this is the default), and the other one targeting the confirm button text.\n\n```html\n\u003cswal title=\"Fill the form, rapidly\" (confirm)=\"sendForm(myForm.value)\"\u003e\n  \u003c!-- This form will be displayed as the alert main content\n       Targets the alert's main content zone by default --\u003e\n  \u003cform *swalPortal [formControl]=\"myForm\"\u003e\n    ...\n  \u003c/form\u003e\n\n  \u003c!-- This targets the confirm button's inner content\n       Notice the usage of ng-container to avoid creating an useless DOM element inside the button --\u003e\n  \u003cng-container *swalPortal=\"swalTargets.confirmButton\"\u003e\n    Send ({{ secondsLeft }} seconds left)\n  \u003c/ng-container\u003e\n\u003c/swal\u003e\n```\n\nWe have the following targets: `closeButton`, `title`, `content`, `actions`, `confirmButton`, `cancelButton`, and `footer`.\n\nThese targets are mostly provided by SweetAlert2 and made available in the right format for swal portals by\nthis library, but you can also make your own if you need to (take inspiration from the original service source).\nThose are just variables containing a function that returns a modal DOM element, not magic.\nThe magic is inside the directive ;)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsweetalert2%2Fngx-sweetalert2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsweetalert2%2Fngx-sweetalert2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsweetalert2%2Fngx-sweetalert2/lists"}