{"id":26162810,"url":"https://github.com/sinan997/ngx-swalify","last_synced_at":"2026-05-17T15:05:48.322Z","repository":{"id":281400699,"uuid":"944645861","full_name":"Sinan997/ngx-swalify","owner":"Sinan997","description":"SweetAlert2 Integration for Angular.","archived":false,"fork":false,"pushed_at":"2025-03-09T19:12:31.000Z","size":299,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T10:40:50.952Z","etag":null,"topics":["angular","sweetalert2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-swalify","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/Sinan997.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-07T18:01:58.000Z","updated_at":"2025-07-24T14:37:58.000Z","dependencies_parsed_at":"2025-03-08T21:22:44.961Z","dependency_job_id":"126f375a-fcfe-4248-b249-c003c5afb346","html_url":"https://github.com/Sinan997/ngx-swalify","commit_stats":null,"previous_names":["sinan997/ngx-swalify"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sinan997/ngx-swalify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sinan997%2Fngx-swalify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sinan997%2Fngx-swalify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sinan997%2Fngx-swalify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sinan997%2Fngx-swalify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sinan997","download_url":"https://codeload.github.com/Sinan997/ngx-swalify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sinan997%2Fngx-swalify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33143276,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","sweetalert2"],"created_at":"2025-03-11T13:59:14.925Z","updated_at":"2026-05-17T15:05:43.312Z","avatar_url":"https://github.com/Sinan997.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-swalify\n\nngx-swalify is an Angular library that simplifies the usage of SweetAlert2 by integrating it with RxJS. It provides a reusable way to handle confirmation dialogs, alerts, and notifications throughout your application.\n\n## Features\n\n- **RxJS-Based API**: Simplifies working with SweetAlert2 by using observables.\n- **Predefined Configurations**: Set default configurations for `confirm`, `delete`, `error`, `info`, and `success` dialogs.\n- **Consistent Usage**: Ensures a unified way of handling alerts across the application.\n- **Don't repeat yourself**: Reduces repetitive code when implementing common dialogs.\n\n## Installation\n\n```sh\n# Using npm\nnpm install ngx-swalify sweetalert2\n\n# Using yarn\nyarn add ngx-swalify sweetalert2\n```\n\n# Usage\n\n- `ngx-swalify` provides a service called **NgxSwalifyService**, an abstraction layer for `sweetalert2`.\n- Use this service directly to trigger `sweetalert2` alerts.\n\n## Fire\n\nThe `fire` method is the core function of **NgxSwalifyService**. It allows you to display a **SweetAlert2** alert with fully customizable options.\n\nHere’s how you can use it:\n\n```ts\nprotected readonly ngxSwalifyService = inject(NgxSwalifyService);\n\nshowAlert(){\n  this.ngxSwalifyService.fire({\n\t  options: {\n      title: 'Do you want to save the changes?',\n      showDenyButton: true,\n      showCancelButton: true,\n      confirmButtonText: 'Save',\n      denyButtonText: `Don't save`,\n    },\n  }).subscribe((result) =\u003e {\n    if (result.isConfirmed) {\n      console.log('Alert Confirmed');\n    } else  if (result.isDenied) {\n      console.log('Alert Denied');\n    }\n  });\n}\n```\n\n### Handling HTTP Requests with NgxSwalifyService\n\n```ts\nprotected readonly ngxSwalifyService = inject(NgxSwalifyService);\nprotected readonly httpService = inject(HttpClient);\n\nhttpDeletePost(id: number) {\n  return this.httpService.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);\n}\n\nshowAlert() {\n  this.ngxSwalifyService\n    .fire({\n      options: {\n        title: 'Do you want to delete this post?',\n        confirmButtonText: 'Delete',\n        cancelButtonText: 'Cancel',\n        showCancelButton: true,\n        icon:  'warning',\n      },\n      preConfirmObservable: this.httpDeletePost(1),\n    })\n    .pipe(\n      filter((result) =\u003e result.isConfirmed \u0026\u0026 !!result.value),\n      switchMap(() =\u003e\n        this.ngxSwalifyService.fire({\n          options: {\n            title: 'Post deleted successfully',\n            icon: 'success',\n          },\n        })\n      ),\n    )\n    .subscribe();\n}\n\n\n```\n\n**Note:** If HTTP request fails, the `result.value` will be `null`. [Reference.](https://github.com/Sinan997/ngx-swalify/blob/main/projects/ngx-swalify/src/lib/utils/swalify-utils.ts#L21-L27)\n\n**Note:** You don’t need to manually **unsubscribe** from the observable returned by `fire`. The **unsubscription** process is handled **automatically.**\n\n# Default Alerts\n\n**NgxSwalifyService** provides a set of predefined methods like `.confirm`, `.delete`, `.success`, `.info`, and `.error` for quick and consistent alert creation.\n\nInstead of manually configuring alerts every time, the service automatically applies these defaults for you.\n\n#### Benefits of Using Default Configurations:\n\n- **Time-saving**: Set default configurations once, and use them across your entire application without needing to redefine them for each alert.\n- **Code Reusability**: Avoid code repetition by defining common settings in one place, making your codebase cleaner and easier to maintain.\n- **Consistency**: Apply a standardized approach to alerts across your app, ensuring that all notifications have a unified look and feel.\n\n#### How It Works\n\n1.  **NgxSwalifyConfig** holds the default configurations for each alert type (e.g., confirm, delete, success, etc.).\n2.  These default settings are injected into the **NgxSwalifyService** and automatically applied when calling alert methods.\n\n**Note:** You can override the default settings by passing custom options when calling the alert methods like `.confirm()`, `.delete()`, or `.success()`. This allows you to adjust the alert for specific use cases without changing the global configuration.\n\n## Set Default Alerts\n\n```ts\n// app.config.ts\nimport { initializer } from './initializer';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    provideRouter(routes),\n    provideHttpClient(),\n    provideAppInitializer(initializer),\n  ],\n};\n```\n\n```ts\n// initializer.ts\nimport { inject } from '@angular/core';\nimport { NgxSwalifyConfig } from 'ngx-swalify';\n\nexport function initializer() {\n  const ngxSwalifyConfig = inject(NgxSwalifyConfig);\n\n  ngxSwalifyConfig.confirm = {\n    title: 'Are you sure?',\n    text: \"You won't be able to revert this!\",\n    confirmButtonText: 'Yes',\n    cancelButtonText: 'No',\n    showCancelButton: true,\n    icon: 'warning',\n  };\n\n  ngxSwalifyConfig.error = {\n    title: 'Oops...',\n    text: 'Something went wrong!',\n    icon: 'error',\n  };\n\n  ngxSwalifyConfig.delete = {\n    title: 'Are you sure?',\n    text: 'This action cannot be undone!',\n    icon: 'warning',\n    showCancelButton: true,\n    confirmButtonText: 'Delete',\n    cancelButtonText: 'Cancel',\n  };\n  // ...\n}\n```\n\n### Usage\n\n```ts\nimport { NgxSwalifyService } from 'ngx-swalify';\n\n@Component({\n  selector: 'app-root',\n  imports: [RouterOutlet],\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.scss',\n})\nexport class AppComponent {\n  protected readonly ngxSwalifyService = inject(NgxSwalifyService);\n  protected readonly httpService = inject(HttpClient);\n\n  showConfirm() {\n    this.ngxSwalifyService.confirm();\n  }\n\n  // You can customize it as needed\n  showCustomConfirm() {\n    this.ngxSwalifyService.confirm({\n      options: {\n        text: 'Are you sure you want to update',\n      },\n      preConfirmObservable: this.httpService.patch('https://jsonplaceholder.typicode.com/posts/1', {\n        title: 'foo',\n      }),\n    });\n  }\n}\n```\n\n### [See an example in StackBlitz](https://stackblitz.com/edit/stackblitz-starters-sjmfubjv?file=src%2Fmain.ts)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinan997%2Fngx-swalify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinan997%2Fngx-swalify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinan997%2Fngx-swalify/lists"}