https://github.com/fivethree-team/ngxs-notification-plugin

🔔 NGXS Notification Plugin
https://github.com/fivethree-team/ngxs-notification-plugin

ionic ngxs notify plugin

Last synced: 3 months ago
JSON representation

🔔 NGXS Notification Plugin

• Host: GitHub
• URL: https://github.com/fivethree-team/ngxs-notification-plugin
• Owner: fivethree-team
• License: mit
• Created: 2019-02-26T19:12:11.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-13T19:42:43.000Z (almost 5 years ago)
• Last Synced: 2024-10-12T23:40:07.928Z (4 months ago)
• Topics: ionic, ngxs, notify, plugin
• Language: TypeScript
• Homepage:
• Size: 348 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Ionic Notify Plugon for NGXS

[![npm version](https://badge.fury.io/js/%40fivethree%2Fngxs-notification-plugin.svg)](https://www.npmjs.com/@fivethree/ngxs-notification-plugin)

[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/fivethree-team/ngxs-notification-plugin/blob/master/LICENSE)

Notification Plugin for Angular 8 or higher and NGXS 3.3.4 or higher.

| Angular | @ngxs/store | @fivethree/@fivethree/ngxs-ionic-router-plugin |

| ------- | ----------- | ---------------------------------------------- |

| 8/9     | 3.6.x+      | 0.3.x+                                         |

| 7       | 3.3.4+      | 0.2.1                                          |

## 📦 Installation

```console

npm install @fivethree/ngxs-notification-plugin --save

# or if you are using yarn

yarn add @fivethree/ngxs-notification-plugin

```

## 🔨 Usage

Import the module into your root application module:

```typescript

import { NgModule } from '@angular/core';

import { NgxsModule } from '@ngxs/store';

import { NgxsNotificationPluginModule } from '@fivethree/ngxs-notification-plugin';

import { ToastService } from './toast.service';

@NgModule({

  imports: [

    NgxsModule.forRoot(states),

    NgxsNotificationPluginModule.forRoot(ToastService)

  ]

})

export class AppModule {}

```

Create a service called for example `ToastService` which has to implement `NotificationEngine`:

```typescript

import { NotificationEngine } from '@fivethree/ngxs-notification-plugin';

import { Injectable } from '@angular/core';

import { ToastController } from '@ionic/angular';

import { NotificationType } from '@fivethree/ngxs-notification-plugin';

@Injectable({

  providedIn: 'root'

})

export class ToastService implements NotificationEngine {

  private static SHORT_DURATION = 3000;

  constructor(private toast: ToastController) {}

  successNotification(message: string, options?: any, actions?: any) {

    this.showToast(message, 'success', options);

  }

  hintNotification(message: string, options?: any, actions?: any) {

    this.showToast(message, 'hint', options);

  }

  warningNotification(message: string, options?: any, actions?: any) {

    this.showToast(message, 'warning', options);

  }

  errorNotification(message: string, options?: any, actions?: any) {

    this.showToast(message, 'error', options);

  }

  unknownErrorNotification(options?: any, error?: any, actions?: any) {

    this.showToast('Unknown error', 'error', options);

  }

  async showToast(message: string, type: NotificationType, options?: any) {

    const toast = await this.toast.create({

      message: message,

      cssClass: `toast-${type}`,

      duration: ToastService.SHORT_DURATION,

      ...options

    });

    toast.present();

  }

}

```

Now the notifications will be reflected in your store under the `notification` state name.

## 🔔 Notification

Notifications are useful for the user to now if an interaction succeeded or failed.

Lets 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.

```typescript

import { Store } from '@ngxs/store';

import { SuccessNotification, UnknownErrorNotification } from '@fivethree/ngxs-notification-plugin';

constructor(private store: Store) {

}

changePassword(oldPassword: string, newPassword: string) {

  this.store.dispatch(new ChangePassword(oldPassword, newPassword))

    .subscribe(() => this.store.dispatch(new SuccessNotification('Your password has been successfully changed.')),

        (error) => this.store.dispatch(new UnknownErrorNotification(error)));

}

```