ngx-azh-notify
v0.0.6
Published
A simple solution for displaying notifications in Angular.
Downloads
14
Maintainers
Readme
Notification for Angular
A simple solution for displaying notifications in Angular.
Quick start
npm install ngx-azh-notify --save
Angular version
This library is built to work with Angular ^17.1.0.
Simple example
// app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxAzhNotifyModule} from 'ngx-azh-notify';
import {MyComponent} from './my.component';
@NgModule({
imports: [BrowserModule, NgxAzhNotifyModule],
declarations: [MyComponent],
bootstrap: [MyComponent]
})
export class MyAppModule {}
// my.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'my-component',
template: `
<!-- IMPORTANT: place this tag in your bootstrap component! -->
<ngx-azh-notify-placement></ngx-azh-notify-placement>
<button (click)="createDanger()">danger</button>
<button (click)="createInfo()">info</button>
<button (click)="createWarning()">warning</button>
`
})
export class MyComponent {
constructor(private notify: NgxAzhNotifyService) {
}
/**
*
*/
public createDanger(): void {
const notification: ComponentRef<NgxAzhNotifyElementComponent> = this.notify.create(NgxAzhNotifyType.Danger, 'This is in danger notification!', {
button: {
fn: () => {
this.close(notification);
},
text: 'Close me!',
},
header: 'Notification:',
});
}
/**
*
*/
public createInfo(): void {
const notification: ComponentRef<NgxAzhNotifyElementComponent> = this.notify.create(NgxAzhNotifyType.Info, 'This is an information notification!', {
button: {
fn: () => {
this.close(notification);
},
text: 'Close me!',
},
header: 'Notification:',
});
}
/**
*
*/
public createWarning(): void {
const notification: ComponentRef<NgxAzhNotifyElementComponent> = this.notify.create(NgxAzhNotifyType.Warning, 'This is an warning notification!', {
button: {
fn: () => {
this.close(notification);
},
text: 'Close me!',
},
header: 'Notification:',
});
}
/**
*
* @param notification
*/
private close(notification: ComponentRef<NgxAzhNotifyElementComponent>): void {
this.notify.close(notification.instance.uid);
}
}
Configuration example
// app.config.ts
import { Injectable } from '@angular/core';
import { NgxAzhConfig, NgxAzhNotifyPosition } from 'ngx-azh-notify';
@Injectable()
export class AppConfig extends NgxAzhConfig {
override delay = 3000;
override position = NgxAzhNotifyPosition.BottomRight;
override freeze = false;
}
// app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxAzhNotifyModule, NgxAzhConfig} from 'ngx-azh-notify';
import {MyComponent} from './my.component';
@NgModule({
imports: [BrowserModule, NgxAzhNotifyModule],
declarations: [MyComponent],
bootstrap: [MyComponent],
providers: [
{
provide: NgxAzhConfig,
useClass: AppConfig,
},
],
})
export class MyAppModule {}
API
Inject tag
Inject the <ngx-azh-notify-placement></ngx-azh-notify-placement>
tag into your autoload component. Otherwise, the library will not be able to show the notification!
<!-- YOUR HTML -->
<ngx-azh-notify-placement></ngx-azh-notify-placement>
<!-- YOUR HTML -->
Method: create(type, message, properties): ComponentRef < NgxAzhNotifyElementComponent > - Create notification
type
[NgxAzhNotifyType
] - required Notification type. See NgxAzhNotifyType enums.message
[string
] - required Notification text.properties
[NgxAzhNotifyProperties
] Notification properties. Overwrites the global application settings. See NgxAzhNotifyProperties.
Method: close(uid): void - Close notification
uid
[string
] - required Close notification by its id.
Method: clear(): void - Close all
Just close all notifications.
Class: NgxAzhConfig
You can set global preferences for all notifications in your application.
The settings are hierarchical: Default (library) -> Global configuration settings (you override NgxAzhConfig) -> Settings passed at the time of notification creation (See create method and properties
value).
delay
[number
] - How long the notification will be shown. Value in milliseconds. 5000 by default.position
[NgxAzhNotifyPosition
] - Position of notifications. Installed globally for everyone. Cannot be set for single notification. Use the NgxAzhNotifyPosition enums. Top right by default.freeze
[boolean
] Do not hide the notification if the mouse is over it. True by default.
Interface: NgxAzhNotifyProperties
header
[string
] - Header of the notification. Undefined by default.delay
[number
] - How long the notification will be shown. Value in milliseconds. 5000 by default.button
[NgxAzhNotifyPropertiesButton
] - An object describing the button. Undefined by default.freeze
[boolean
] Do not hide the notification if the mouse is over it. True by default.
Interface: NgxAzhNotifyPropertiesButton
fn
[function
] - The function to be executed when the button is pressed.text
[string
] - Button text.
Enum: NgxAzhNotifyPosition
TopLeft
TopRight
BottomLeft
BottomRight
Enum: NgxAzhNotifyType
Info
Danger
Warning
Styling
Import ./node_modules/ngx-azh-notify/src/lib/ngx-azh-notify.scss
from the library into your root stylesheet.
License
MIT