ngx-notification

It is a flexible and usable component.

Demo

Demo

Installation

1.You need install @flywine93/ngx-notification by npm

npm install @flywine93/ngx-notification --save

2.You need install @flywine93/ngx-autounsubscrb

npm i @flywine93/ngx-autounsubscrb --save

ngx-autounsubscrb Introduction

3.You need install @angular/animations

npm install --save @angular/animations

Import

You need to import NgxNotificationModule, BrowserAnimationsModule.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgxNotificationModule } from '@flywine93/ngx-notification';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    CommonModule,
    NgxNotificationModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

1.Add ngx-notification to the component, which should be global.

eg. app.component.html

<ngx-notification></ngx-notification>

2.The message is triggered through the NgxNotificationService service.

import { NgxNotificationService } from '@flywine93/ngx-notification';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private notification: NgxNotificationService) {
  }
}

3. Send message by service.

  sendInfo() {
    this.notification.notify(NotificationType.INFO, 'Hello World', 'This is an information', 0);
  }

  sendSuccess() {
    this.notification.notify(NotificationType.SUCCESS, 'Hello World', 'This is a success !', 3000);
  }

  sendWarning() {
    this.notification.notify(NotificationType.WARNING, 'Hello World', 'This is a warning !');
  }

  sendError() {
    this.notification.notify(NotificationType.ERROR, 'Hello World', 'This is an error :(');
  }

It's that simple!!!

Advanced usage

Component Options

options: NotifyOptions

export type NotificationPosition = 't' | 'b' | 'lt' | 'lb' | 'rt' | 'rb';
export interface NotifyOptions {
    position?: NotificationPosition;
    startDistance?: number; 
    animation?: boolean;
    shadow?: boolean;
    title?: {
        infoFontColor?: string,
        successFontColor?: string,
        warningFontColor?: string,
        errorFontColor?: string,
        background?: string;
        bold?: boolean;
    };
    msg?: {
        infoFontColor?: string,
        successFontColor?: string,
        warningFontColor?: string,
        errorFontColor?: string,
        background?: string;
        maxHeight?: number;
    };
    infoBgColor?: string;
    successBgColor?: string;
    warningBgColor?: string;
    errorBgColor?: string;
}

| Option | Description | Default Value | | ----------- | ------------------------------------------------------ | ------------- | | position | The position of the notification message box, 't' | 'b' | 'lt' | 'lb' | 'rt' | 'rb' | rt | | startDistance | The distance between the starting position of the notification box and the top or bottom.number | 0 animation | Whether to turn on the appear and disappear animations.boolean | true shadow | Whether to turn on shadow effects.boolean | true title | The theme of the title in the notification box. | material theme msg | The theme of the message in the notification box. | material theme infoBgColor | general notification box background color | material theme successBgColor | success notification box background color | material theme warningBgColor | warning notification box background color | material theme errorBgColor | error notification box background color | material theme

• position--t: top,b: bottom, lt: left top, lb: left bottom, rb: right bottom, rt: right top

Component Theme

There are now two themes available, material theme and darkWindstorm theme.

1. material theme

2.darkWindstorm theme

Component Usage

1.change notification box position to b.

app.component.html

<button mat-raised-button color="basic" (click)="sendInfo()">Info</button>
<button mat-raised-button color="primary" (click)="sendSuccess()">Success</button>
<button mat-raised-button color="accent" (click)="sendWarning()">Warning</button>
<button mat-raised-button color="warn" (click)="sendError()">Error</button>

<ngx-notification [options]="options"></ngx-notification>

app.component.ts

import {
  NgxNotificationService,
  NotificationType,
  NotificationThemes, NotifyOptions, ThemeName } from '@flywine93/ngx-notification';
export class AppComponent {

  theme = ThemeName.MATERILA;
  options: NotifyOptions;

  constructor(private notification: NgxNotificationService) {
    this.options = {
      position: 'b'
    };
  sendInfo() {
    this.notification.notify(NotificationType.INFO, 'Hello World', 'This is an information', 0);
  }

  sendSuccess() {
    this.notification.notify(NotificationType.SUCCESS, 'Hello World', 'This is a success !');
  }

  sendWarning() {
    this.notification.notify(NotificationType.WARNING, 'Hello World', 'This is a warning !');
  }

  sendError() {
    this.notification.notify(NotificationType.ERROR, 'Hello World', 'This is an error :(');
  }
  }
}

2.change theme

app.component.html

<ngx-notification [theme]="theme" [options]="options"></ngx-notification>

app.component.ts

import {
  NgxNotificationService,
  NotificationType,
  NotificationThemes,
  NotifyOptions,
  ThemeName } from '@flywine93/ngx-notification';
export class AppComponent {

  theme = ThemeName.DARK_WINDSTORM;
  options: NotifyOptions;

  constructor(private notification: NgxNotificationService) {
    this.options = {
      position: 'b'
    };
  }
}

You can also customize colors by options property.

eg.

export class AppComponent {

  theme = ThemeName.MATERILA;
  options: NotifyOptions;

  constructor(private notification: NgxNotificationService) {
    this.options = {
      title: {
        infoFontColor: '#fff',
        successFontColor: '#fff',
        warningFontColor: '#fff',
        errorFontColor: '#fff',
        background: 'rgba(0, 0, 0, 0.6)',
        bold: true
      },
      msg: {
        infoFontColor: '#fff',
        successFontColor: '#fff',
        warningFontColor: '#fff',
        errorFontColor: '#fff',
        background: 'rgba(0, 0, 0, 0.4)'
      },
      infoBgColor: 'rgba(189, 189, 189, 0.9)',
      successBgColor: 'rgba(27, 158, 119, 0.9)',
      warningBgColor: 'rgba(217, 95, 2, 0.9)',
      errorBgColor: 'rgba(246, 71, 71, 0.9)'
    };
  }
}

The custom configuration will override the default configuration.

notification service

method

• notify --- Send a message. notify(type: NotificationType, title: string, message: string, timeout = 3000): void
  • type: NotificationType enum, SUCCESS|WARNING|ERROR|INFO。
  • title: message title
  • message: text
  • timeout: delay closing time，If it is 0ms, it will not close actively, it needs to close manually.
• update --- Forced update options, eg. change position.
• changeTheme --- change notification box theme
• changeOptions --- change notification options then update

Usage

1.send a info notification.

You need inject NgxNotificationService service.

import {
  NgxNotificationService,
  NotificationType,
  ThemeName } from '@flywine93/ngx-notification';
export class AppComponent {

  theme = ThemeName.MATERILA;
  options: NotifyOptions;

  constructor(private notification: NgxNotificationService) {
  }

  sendInfo() {
    this.notification.notify(NotificationType.INFO, 'Hello World', 'This is an information', 1000);
  }
}

2.change options

export class AppComponent {

  theme = ThemeName.MATERILA;
  options: NotifyOptions = {position: 'rt'};

  constructor(private notification: NgxNotificationService) {
  }

  changeOptions(): void  {
    this.options.position = 'b';
    this.notification.update();
  }
}

If the update is not forced, it will be updated at the next change.

3.change options or theme by service

changePosition(dir: NotificationPosition): void {
  this.notification.changeOptions({position: dir});
}

changeTheme(theme: ThemeName): void {
  this.notification.changeTheme(theme);
}

TODO

• [x] add update options by service
• [x] add change theme by service

License

The MIT License (see the LICENSE file for the full text)