ngx-kc-notification

DEMO: https://kastriotcunaku.github.io/ngx-kc-notification/

Features

• Modern UI
• Smooth animation
• Different notification types
• Show multiple notifications in the same time
• Use as prompt with action buttons
• Easy to install and use

Dependencies

ngx-kc-notification	Angular
1.0.0	5.x

Install

npm install ngx-kc-notification --save

Setup

step 1: Add NgxNotificationModule to AppModule

import { CommonModule } from '@angular/common';

import { NgxNotificationModule } from 'ngx-notification';

@NgModule({
  imports: [
    CommonModule,
    NgxNotificationModule // NgxNotificationModule added
  ],
  bootstrap: [App],
  declarations: [App]
})
class AppModule {}

step 2: Add notification component tag on top of app.component.html

<ngx-notification></ngx-notification>
<!-- Your app template goes below -->

Use

import { Component } from '@angular/core';
import { NgxNotificationService } from 'ngx-notification';

@Component({
  selector: 'my-component',
  templateUrl: `
  <button (click)="show()">Show notification</button>
  `,
  styleUrls: []
})
export class MyComponent {

  constructor(private notification: NgxNotificationService) { }

  show() {
      this.notification.success('Your first notification');
  }
}

More examples and options can be found here

Options

Parameters

Option	Type	Description
message	string	Notification message
title	string	Notification Title
buttons	NotificationButton[]	Notification action buttons
options	NotificationOptions	Notification options

NotificationButton

Option	Type	Description
text	string	Button text
callback	callback function	On click callback function
dismiss	boolean	Dismiss notification on button click

NotificationOptions

Option	Type	Description
duration	number	Notification duration in milliseconds
closeButton	boolean	Show X button on right corner
backdropDismiss	boolean	Dismiss notification on backdrop click

License

MIT