0.0.6 • Published 4 months ago
ngx-azh-notify v0.0.6
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
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