A singleton, global Angular service to programmatically render notifications.
This library | Angular |
---|---|
1.x.x | 16 - 18 |
npm
npm i -S @lazycuh/angular-notification
pnpm
pnpm i -S @lazycuh/angular-notification
yarn
yarn add @lazycuh/angular-notification
These are the symbols that are available from this package
A singleton Angular service to programmatically show notifications.
class NotificationService {
/**
* Set the default theme that will be used for all notifications created in the future.
*
* @param theme The new theme to be used as the default.
*/
static setDefaultTheme(theme: Theme): void;
/**
* Set the default label for the close button. Default is `Close`.
*/
static setDefaultCloseButtonLabel(label: string): void;
/**
* Open a notification using the provided configuration. The opened notification
* will be closed automatically after 10 seconds by default.
*
* @param notificationConfiguration The notification configuration object.
*/
open(notificationConfiguration: NotificationConfiguration);
}
The configuration object for the notification to be created.
interface NotificationConfiguration {
/**
* The optional number of milliseconds after which the notification is closed. Default is 10 seconds.
*/
autoCloseMs?: number;
/**
* The optional class name to add for this notification.
*/
className?: string;
/**
* The optional label for the notification's close button. Default is `Close`.
*/
closeButtonLabel?: string;
/**
* The required notification content to show. HTML is supported.
*/
content: string;
/**
* The optional theme for the floating box. Default is `light`.
*/
theme?: Theme;
}
type Theme = 'dark' | 'light';
// Import the service into your class to start using it
import { NotificationService } from '@lazycuh/angular-notification';
@Component({
selector: 'test-component',
template: `
<button
type="button"
(click)="showNotification()">
Click me
</button>
`
})
export class TestComponent {
constructor(private readonly notificationService: NotificationService) {}
showNotification() {
this.notificationService.open({
content: 'This notification is very <strong>important</strong>'
});
}
}
Theme | |
---|---|
Light | ![]() |
Dark | ![]() |