Nixon's Pants Missing

    ngx-kc-notification
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published
    ngx-kc-notification preview

    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

    Install

    npm i ngx-kc-notification

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    237 kB

    Total Files

    32

    Last publish

    Collaborators

    • kastriotcunaku