<!DOCTYPE html>
<html>
<head>
<base href=".">
<title>"angular-notifier" demo</title>
<!-- Styles (and fonts) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://unpkg.com/angular-notifier@2.0.0/styles.css">
<!-- Polyfills -->
<script src="https://unpkg.com/core-js@2.4.x/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.x/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js@0.6.x/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.x/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.x/dist/system.js"></script>
<script src="https://unpkg.com/web-animations-js@2.2.x/web-animations-next.min.js"></script>
<!-- SystemJS Module Loader -->
<script src="./systemjs.config.js"></script>
<script>
System.import( 'app' ).catch( ( error ) => {
console.error( error );
} );
</script>
</head>
<body>
<app>
Loading demo for "angular-notifier" ...
</app>
</body>
</html>
/* BASIC */
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
box-sizing: border-box;
font-family: "Roboto", "Tahoma", "Trebuchet MS", "Arial", "Helvetica", sans-serif;
font-size: 14px;
}
* {
box-sizing: inherit;
}
/* APP */
.app {
display: block;
padding: 30px;
}
/* HEADINGS */
h1 {
font-size: 30px;
padding-bottom: 10px;
}
h2 {
margin-top: 40px;
font-size: 18px;
}
/* BUTTONS */
.button {
display: inline-block;
padding: 11px 16px 10px;
margin-right: 4px;
background: none;
border: none;
border-radius: 2px;
cursor: pointer;
opacity: 1;
-webkit-transition: background-color .2s ease;
transition: background-color .2s ease;
}
.button--primary {
background-color: #2B90D9;
color: #FFF;
}
.button--primary:hover,
.button--primary:focus,
.button--primary:active {
background-color: #2273AD;
}
.button--secondary {
background-color: #DDD;
color: #333;
}
.button--secondary:hover,
.button--secondary:focus,
.button--secondary:active {
background-color: #CACACA;
}
# "angular-notifier" demo
- Play around with pre-defined notifications by using the buttons
- Change the source code and see the results live
- Customize the configuration in `src/app.module.ts`
And finally: Have fun, and happy coding!
> Interactive live demo for the **[angular-notifier](https://github.com/dominique-mueller/angular-notifier)** library.
System.config( {
// Compile TypeScript at runtime
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
// Path shortcuts
paths: {
'npm:': 'https://unpkg.com/' // Instead of 'node_modules'
},
// Package location details
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
'angular-notifier': 'npm:angular-notifier@2.0.0/angular-notifier.umd.js'
},
// Package loading details
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'angular-notifier': {
defaultExtension: 'js'
}
}
} );
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// Bootstrap app module
platformBrowserDynamic().bootstrapModule( AppModule )
.then( () => {
console.log( 'Application bootstrap successful!' );
} )
.catch( ( error: any ) => {
console.error( 'An error occured during the application bootstrap!' );
console.error( error );
} );
import { Component } from '@angular/core';
import { NotifierService } from 'angular-notifier';
/**
* App component
*/
@Component({
host: {
class: 'app'
},
selector: 'app',
template: `
<h1>"angular-notifier" demo</h1>
<h2>Show notifications</h2>
<button class="button button--primary" (click)="showNotification( 'default', 'Good evening, you lovely person!' )">
Default me!
</button>
<button class="button button--primary" (click)="showNotification( 'info', 'This library is built on top of Angular 2.' )">
Info me!
</button>
<button class="button button--primary" (click)="showNotification( 'success', 'Notification successfully opened.' )">
Success me!
</button>
<button class="button button--primary" (click)="showNotification( 'warning', 'Warning! But not an error! Just a warning!' )">
Warning me!
</button>
<button class="button button--primary" (click)="showNotification( 'error', 'Whoops, something went wrong. Probably.' )">
Error me!
</button>
<h2>Hide notifications</h2>
<button class="button button--secondary" (click)="hideAllNotifications()">
Hide all notifications!
</button>
<button class="button button--secondary" (click)="hideOldestNotification()">
Hide oldest notification!
</button>
<button class="button button--secondary" (click)="hideNewestNotification()">
Hide newest notification!
</button>
<h2>Show & hide a specific notification</h2>
<button class="button button--primary" (click)="showSpecificNotification( 'default', 'Hello, you lovely person!', 'ID_TEST' )">
Show notification with ID named 'ID_TEST'
</button>
<button class="button button--secondary" (click)="hideSpecificNotification( 'ID_TEST' )">
Hide notification with ID named 'ID_TEST'
</button>
<notifier-container></notifier-container>
`
})
export class AppComponent {
/**
* Notifier service
*/
private notifier: NotifierService;
/**
* Constructor
*
* @param {NotifierService} notifier Notifier service
*/
public constructor( notifier: NotifierService ) {
this.notifier = notifier;
}
/**
* Show a notification
*
* @param {string} type Notification type
* @param {string} message Notification message
*/
public showNotification( type: string, message: string ): void {
this.notifier.notify( type, message );
}
/**
* Hide oldest notification
*/
public hideOldestNotification(): void {
this.notifier.hideOldest();
}
/**
* Hide newest notification
*/
public hideNewestNotification(): void {
this.notifier.hideNewest();
}
/**
* Hide all notifications at once
*/
public hideAllNotifications(): void {
this.notifier.hideAll();
}
/**
* Show a specific notification (with a custom notification ID)
*
* @param {string} type Notification type
* @param {string} message Notification message
* @param {string} id Notification ID
*/
public showSpecificNotification( type: string, message: string, id: string ): void {
this.notifier.show( {
id,
message,
type
} );
}
/**
* Hide a specific notification (by a given notification ID)
*
* @param {string} id Notification ID
*/
public hideSpecificNotification( id: string ): void {
this.notifier.hide( id );
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NotifierModule, NotifierOptions } from 'angular-notifier';
import { AppComponent } from './app.component';
/**
* Custom angular notifier options
*/
const customNotifierOptions: NotifierOptions = {
position: {
horizontal: {
position: 'left',
distance: 12
},
vertical: {
position: 'bottom',
distance: 12,
gap: 10
}
},
theme: 'material',
behaviour: {
autoHide: 5000,
onClick: false,
onMouseover: 'pauseAutoHide',
showDismissButton: true,
stacking: 4
},
animations: {
enabled: true,
show: {
preset: 'slide',
speed: 300,
easing: 'ease'
},
hide: {
preset: 'fade',
speed: 300,
easing: 'ease',
offset: 50
},
shift: {
speed: 300,
easing: 'ease'
},
overlap: 150
}
};
/**
* App module
*/
@NgModule( {
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
BrowserModule,
NotifierModule.withConfig( customNotifierOptions )
]
} )
export class AppModule {}