Author: | cloukit |
---|---|
Official Page: | Go to website |
Publish Date: | December 6, 2017 |
License: | MIT |
Description:
This notification library shows success, error, info and warning notifications on your Angular 4+ app.
Installation:
# Yarn $ yarn add @cloukit/notification # NPM $ npm install @cloukit/notification --save
How to use it:
Import the necessary modules.
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CloukitDropoutModule } from '@cloukit/dropout'; import { CloukitThemeModule } from '@cloukit/theme'; import { CloukitNotificationModule } from '@cloukit/notification'; @NgModule({ declarations: [ AppComponent ], imports: [ CommonModule, CloukitThemeModule, CloukitNotificationModule, CloukitDropoutModule, ], providers: [ ], bootstrap: [ AppComponent ], })
In you component template.
<cloukit-dropout-outlet></cloukit-dropout-outlet> <cloukit-notification-outlet-loader theme="notification" placement="bottomLeft" offsetX="80" offsetY="0" ></cloukit-notification-outlet-loader>
Create a demo notification.
import { Component } from '@angular/core'; import { CloukitNotificationService, CloukitNotification, CloukitNotificationType, } from '@cloukit/notification'; @Component({ selector: 'demo', template: `<button (click)="addNotification()">add</button>`, styles: [] }) export class DemoComponent { constructor(private notificationService: CloukitNotificationService) {} addNotification() { this.notificationService.addNotification( new CloukitNotification( 'Success', // title 'You clicked a button!', // message CloukitNotificationType.SUCCESS, // type null, // linkOne null, // linkTwo 2000 // Optional: Autoclose after 2secs )); } }
Preview: