Ih-ng-notification NPM

IH NG Notification

This is like plug-and-play lib no need to add any customization to your project just install the lib and import its module in your desired module and start using IHNotificationService for your beautiful web notifications/toasters.

Features

No viewContainer or bootstrap required
Component inheritance for custom notification UI
Angular Material Supported for notification/toast position including ltr and rtl support
Mat Icon supported
Translation supported
For Heading and Message HTML format support
On click Custom Action Callback support

Images

Warning Error Warning Warning

Dependencies

Angular Material
ngx-translate/core (TODO)

How to Install

npm i ih-ng-notification

pnpm add ih-ng-notification

Setup

import { IHNotificationModule } from 'ih-ng-notification';

@NgModule({
  imports: [
    ...,

    IHNotificationModule,
  ],
  ...
})
class YourModule {}

How to Use

import { IHNotificationService } from 'ih-ng-notification';

@Component({...})
export class YourComponent {
  constructor(private readonly notificationService: IHNotificationService) {}

  public showSuccess() {
    this.notificationService.
        success('MESSAGE', 'HEADING', true, { ...custom config });
  }

  public showError() {
    this.notificationService.
        error('MESSAGE', 'HEADING', true, { ...custom config });
  }

  public showWarning() {
    this.notificationService.
        warning('MESSAGE', 'HEADING', true, { ...custom config });
  }

  public showInformation() {
    this.notificationService.
        info('MESSAGE', 'HEADING', true, { ...custom config });
  }

  public showWithCustomActionButtonAndCallBack() {
    this.notificationService.
        showNotificationWithCustomActionIcon('MESSAGE', 'NOTIFICATION_TYPE', { icon: 'home', tooltip: 'text',
         cb: ()=> {
            ....
          }
        }, 'HEADING', { ...custom config });
  }
}

Options

For now you can see all the options available in IHNotificationService service doc. we'll add detailed doc in here too.

For the reference you can see Interface here

/**
 * @description This interface is for custom notification action button config
 * @author IDNAN.HAIDER
 * @export
 * @interface CustomActionInterface
 */
export interface CustomActionInterface {
  icon: string;
  tooltip: string;
  cb: Function;
}

/**
 * @description This interface is for notification data
 * @author IDNAN.HAIDER
 * @export
 * @interface NotificationDataInterface
 */
export interface NotificationDataInterface {
  heading?: string;
  message: string;
  icon: string;
  closeable?: boolean;
  action?: CustomActionInterface;
}

export type NotificationType = "success" | "error" | "warning" | "info";