Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-20 09:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): rename toaster to notifications

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-24 12:04:40 +03:00
parent ef994704c2
commit 2e186f2bd6
5 changed files with 11 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/app/pages/components/notifications/notifications.component.html Normal file
View file

@ -0,0 +1,57 @@
<nga-card>
<nga-card-header>
Toaster configuration
</nga-card-header>
<nga-card-body>
<toaster-container [toasterconfig]="config"></toaster-container>
<div class="form-group">
<label class="form-control-label">Place to show toast:</label>
<select class="form-control" [(ngModel)]="position" name="position">
<option *ngFor="let position of positions" [ngValue]="position">{{position}}</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label">Animation type:</label>
<select class="form-control" [(ngModel)]="animationType"name="animation">
<option *ngFor="let type of animations" [ngValue]="type">{{type}}</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label">Title:</label>
<input class="form-control" [(ngModel)]="title" name="title">
</div>
<form>
<div class="form-group">
<label class="form-control-label">Content:</label>
<input class="form-control" [(ngModel)]="content" name="content">
</div>
</form>
<div class="form-group">
<label class="form-control-label">Time to hide toast, ms. 0 to persistent toast:</label><input class="form-control" type="number" [(ngModel)]="timeout"name="timeout">
</div>
<div class="form-group">
<label class="form-control-label">Limit number of toasts:</label><input class="form-control" type="number" [(ngModel)]="toastsLimit" name="limit">
</div>
<div class="form-group">
<label class="form-control-label">Toast type:</label>
<select class="form-control" [(ngModel)]="type" name="type">
<option *ngFor="let type of types" [ngValue]="type">{{type}}</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label"><input type="checkbox" [(ngModel)]="isNewestOnTop" name="onTop">Newest on top</label>
</div>
<div class="form-group">
<label class="form-control-label"><input type="checkbox" [(ngModel)]="isHideOnClick"name="hideOnClick">Hide on click</label>
</div>
<div class="form-group">
<label class="form-control-label"><input type="checkbox" [(ngModel)]="isDuplicatesPrevented" name="noDupl">Prevent arising of duplicate toast</label>
</div>
<div class="form-group">
<label class="form-control-label"><input type="checkbox" [(ngModel)]="isCloseButton" name="closeBtn">Close button</label>
</div>
<button class="btn btn-default" (click)="makeToast()">Show toast</button>
<button class="btn btn-default" (click)="clearToasts()">Clear all toasts</button>
</nga-card-body>
</nga-card>

3
src/app/pages/components/notifications/notifications.component.scss Normal file
View file

@ -0,0 +1,3 @@
input[type='checkbox'] {
margin-right: 0.5rem;
}

54
src/app/pages/components/notifications/notifications.component.ts Normal file
View file

@ -0,0 +1,54 @@
import { Component } from '@angular/core';
import { ToasterService, ToasterConfig, Toast } from 'angular2-toaster';
// import 'style-loader!angular2-notifications/notifications.css';
@Component({
selector: 'ngx-notifications',
styleUrls: ['./notifications.component.scss'],
templateUrl: './notifications.component.html',
})
export class NotificationsComponent {
constructor(private toasterService: ToasterService) {}
title: string = 'HI there!';
content: string = `I'm cool toaster!`;
type: string = 'default';
isCloseButton: boolean = true;
config: ToasterConfig;
isHideOnClick: boolean = true;
isNewestOnTop: boolean = true;
toastsLimit: number = 5;
position: string = 'toast-bottom-right';
timeout: number = 5000;
isDuplicatesPrevented: boolean = false;
animationType: string = 'fade';
types: string[] = ['default', 'info', 'wait', 'success', 'warning', 'error'];
animations: string[] = ['fade', 'flyLeft', 'flyRight', 'slideDown', 'slideUp'];
positions: string[] = ['toast-top-full-width', 'toast-bottom-full-width', 'toast-top-left', 'toast-top-center',
'toast-top-right', 'toast-bottom-right', 'toast-bottom-center', 'toast-bottom-left', 'toast-center'];
makeToast() {
this.config = new ToasterConfig({
positionClass: this.position,
timeout: this.timeout,
newestOnTop: this.isNewestOnTop,
preventDuplicates: this.isDuplicatesPrevented,
animation: this.animationType,
limit: this.toastsLimit,
});
const toast: Toast = {
type: this.type,
title: this.title,
body: this.content,
timeout: this.timeout,
showCloseButton: this.isCloseButton,
};
this.toasterService.popAsync(toast);
}
clearToasts() {
this.toasterService.clear();
}
}