{"id":13660572,"url":"https://github.com/fivethree-team/ngxs-notification-plugin","last_synced_at":"2025-04-23T19:32:40.878Z","repository":{"id":85469898,"uuid":"172773435","full_name":"fivethree-team/ngxs-notification-plugin","owner":"fivethree-team","description":"🔔 NGXS Notification Plugin","archived":false,"fork":false,"pushed_at":"2020-02-13T19:42:43.000Z","size":356,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T19:21:30.429Z","etag":null,"topics":["ionic","ngxs","notify","plugin"],"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/fivethree-team.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-02-26T19:12:11.000Z","updated_at":"2020-03-12T19:35:08.000Z","dependencies_parsed_at":"2024-01-15T20:50:44.472Z","dependency_job_id":"979ba77f-8104-4569-9a75-3f3630c6bd04","html_url":"https://github.com/fivethree-team/ngxs-notification-plugin","commit_stats":{"total_commits":33,"total_committers":1,"mean_commits":33.0,"dds":0.0,"last_synced_commit":"e5853f67a66e15ec0c632add8885ee0f888478b8"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivethree-team%2Fngxs-notification-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivethree-team%2Fngxs-notification-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivethree-team%2Fngxs-notification-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivethree-team%2Fngxs-notification-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fivethree-team","download_url":"https://codeload.github.com/fivethree-team/ngxs-notification-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250036763,"owners_count":21364424,"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":["ionic","ngxs","notify","plugin"],"created_at":"2024-08-02T05:01:23.183Z","updated_at":"2025-04-23T19:32:40.473Z","avatar_url":"https://github.com/fivethree-team.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Ionic Notify Plugon for NGXS\n\n[![npm version](https://badge.fury.io/js/%40fivethree%2Fngxs-notification-plugin.svg)](https://www.npmjs.com/@fivethree/ngxs-notification-plugin)\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/fivethree-team/ngxs-notification-plugin/blob/master/LICENSE)\n\nNotification Plugin for Angular 8 or higher and NGXS 3.3.4 or higher.\n\n| Angular | @ngxs/store | @fivethree/@fivethree/ngxs-ionic-router-plugin |\n| ------- | ----------- | ---------------------------------------------- |\n| 8/9     | 3.6.x+      | 0.3.x+                                         |\n| 7       | 3.3.4+      | 0.2.1                                          |\n\n## 📦 Installation\n\n```console\nnpm install @fivethree/ngxs-notification-plugin --save\n\n# or if you are using yarn\nyarn add @fivethree/ngxs-notification-plugin\n```\n\n## 🔨 Usage\n\nImport the module into your root application module:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { NgxsModule } from '@ngxs/store';\nimport { NgxsNotificationPluginModule } from '@fivethree/ngxs-notification-plugin';\nimport { ToastService } from './toast.service';\n\n@NgModule({\n  imports: [\n    NgxsModule.forRoot(states),\n    NgxsNotificationPluginModule.forRoot(ToastService)\n  ]\n})\nexport class AppModule {}\n```\n\nCreate a service called for example `ToastService` which has to implement `NotificationEngine`:\n\n```typescript\nimport { NotificationEngine } from '@fivethree/ngxs-notification-plugin';\nimport { Injectable } from '@angular/core';\nimport { ToastController } from '@ionic/angular';\nimport { NotificationType } from '@fivethree/ngxs-notification-plugin';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ToastService implements NotificationEngine {\n  private static SHORT_DURATION = 3000;\n\n  constructor(private toast: ToastController) {}\n\n  successNotification(message: string, options?: any, actions?: any) {\n    this.showToast(message, 'success', options);\n  }\n\n  hintNotification(message: string, options?: any, actions?: any) {\n    this.showToast(message, 'hint', options);\n  }\n\n  warningNotification(message: string, options?: any, actions?: any) {\n    this.showToast(message, 'warning', options);\n  }\n\n  errorNotification(message: string, options?: any, actions?: any) {\n    this.showToast(message, 'error', options);\n  }\n\n  unknownErrorNotification(options?: any, error?: any, actions?: any) {\n    this.showToast('Unknown error', 'error', options);\n  }\n\n  async showToast(message: string, type: NotificationType, options?: any) {\n    const toast = await this.toast.create({\n      message: message,\n      cssClass: `toast-${type}`,\n      duration: ToastService.SHORT_DURATION,\n      ...options\n    });\n\n    toast.present();\n  }\n}\n```\n\nNow the notifications will be reflected in your store under the `notification` state name.\n\n## 🔔 Notification\n\nNotifications are useful for the user to now if an interaction succeeded or failed.\n\nLets say you have an action to change the users password, you can display a notification if the password was changed successfully and if an error occurred.\n\n```typescript\nimport { Store } from '@ngxs/store';\nimport { SuccessNotification, UnknownErrorNotification } from '@fivethree/ngxs-notification-plugin';\n\nconstructor(private store: Store) {\n\n}\n\nchangePassword(oldPassword: string, newPassword: string) {\n  this.store.dispatch(new ChangePassword(oldPassword, newPassword))\n    .subscribe(() =\u003e this.store.dispatch(new SuccessNotification('Your password has been successfully changed.')),\n        (error) =\u003e this.store.dispatch(new UnknownErrorNotification(error)));\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffivethree-team%2Fngxs-notification-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffivethree-team%2Fngxs-notification-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffivethree-team%2Fngxs-notification-plugin/lists"}