Skip to content

Commit

Permalink
fix(): Changed name of SlimLoadingBar component
Browse files Browse the repository at this point in the history
  • Loading branch information
@akserg
akserg committed Apr 2, 2016
1 parent 98120cd commit 28a032c
Show file tree
Hide file tree
Showing 8 changed files with 301 additions and 140 deletions.
139 changes: 22 additions & 117 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# ng2-toasty [![Build Status](https://travis-ci.org/akserg/ng2-toasty.svg?branch=master)](https://travis-ci.org/akserg/ng2-toasty) [![npm version](https://img.shields.io/npm/v/ng2-toasty.svg)](https://www.npmjs.com/package/ng2-toasty) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-toasty.svg?style=flat-square)](https://www.npmjs.com/package/ng2-toasty)[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
# ng2-slim-loading-bar [![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar) [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

Angular2 Toasty component shows growl-style alerts and messages for your application.
Angular2 component shows slim loading bar at the top of the page of your application.

Simple examples using ng2-toasty:
Simple examples using ng2-slim-loading-bar:
- with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)
- with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)

Expand All @@ -11,146 +11,51 @@ Online demo available [here](http://akserg.github.io/ng2-webpack-demo)
## Installation
First you need to install the npm module:
```sh
npm install ng2-toasty --save
npm install ng2-slim-loading-bar --save
```

If you use SystemJS to load your files, you might have to update your config with this if you don't use `defaultJSExtensions: true`:
```js
System.config({
packages: {
"/ng2-toasty": {"defaultExtension": "js"}
"/ng2-slim-loading-bar": {"defaultExtension": "js"}
}
});
```

Finally, you can use *ng2-toasty* in your Angular 2 project:
- Import `ToastyService, ToastyConfig, Toasty, ToastOptions` from `ng2-toasty/ng2-toasty`
- Instantiate `ToastyService, ToastyConfig` in the bootstrap of your application;
- Add `Toasty` to the "directives" property of your application component;
- Add `<ng2-toasty></ng2-toasty>` tag in template of your application component.
Finally, you can use *ng2-slim-loading-bar* in your Angular 2 project:
- Import `SlimLoadingBarService, SlimLoadingBar` from `ng2-slim-loading-bar/ng2-slim-loading-bar`
- Instantiate `SlimLoadingBarService` in the bootstrap of your application;
- Add `SlimLoadingBar` to the "directives" property of your application component;
- Add `<ng2-slim-loading-bar></ng2-slim-loading-bar>` tag in template of your application component.

```js
import {Component} from 'angular2/core';
import {ToastyService, ToastyConfig, Toasty, ToastOptions, ToastData} from 'ng2-toasty/ng2-toasty';
import {SlimLoadingBarService, SlimLoadingBar} from 'ng2-slim-loading-bar/ng2-slim-loading-bar';
import {bootstrap} from 'angular2/platform/browser';

bootstrap(AppComponent, [
ToastyService, ToastyConfig // It is required to have 1 unique instance of your service
SlimLoadingBarService // It is required to have 1 unique instance of your service
]);

@Component({
selector: 'app',
directives: [Toasty],
directives: [SlimLoadingBar],
template: `
<div>Hello world</div>
<button (click)="addToast()">Add Toast</button>
<ng2-toasty></ng2-toasty>
<button (click)="startLoading()">Start Loading</button>
<ng2-slim-loading-bar></ng2-slim-loading-bar>
`
})
export class AppComponent {

constructor(private toastyService:ToastyService) { }
constructor(private slimLoadingBarService:SlimLoadingBarService) { }

addToast() {
// Just add default Toast with title only
this.toastyService.default('Hi there');
// Or create the instance of ToastOptions
var toastOptions:ToastOptions = {
title: "My title",
msg: "The message",
showClose: true,
timeout: 5000,
theme: 'default'
onAdd: (toast:ToastData) => {
console.log('Toast ' + toast.id + ' has been added!');
},
onRemove: function(toast:ToastData) {
console.log('Toast ' + toast.id + ' has been removed!');
}
};
// Add see all possible types in one shot
this.toastyService.info(toastOptions);
this.toastyService.success(toastOptions);
this.toastyService.wait(toastOptions);
this.toastyService.error(toastOptions);
this.toastyService.warning(toastOptions);
}
}
```

## How dynamically update title and message of toast
Here is an example of how to dynamically update message and title of individual toast:

```js
import {Component} from 'angular2/core';
import {ToastyService, ToastyConfig, Toasty, ToastOptions, ToastData} from 'ng2-toasty/ng2-toasty';
import {bootstrap} from 'angular2/platform/browser';
import {Subject, Observable, Subscription} from 'rxjs/Rx';

bootstrap(AppComponent, [
ToastyService, ToastyConfig // It is required to have 1 unique instance of your service
]);

@Component({
selector: 'app',
directives: [Toasty],
template: `
<div>Hello world</div>
<button (click)="addToast()">Add Toast</button>
<ng2-toasty></ng2-toasty>
`
})
export class AppComponent {

getTitle(num: number): string {
return 'Countdown: ' + num;
}

getMessage(num: number): string {
return 'Seconds left: ' + num;
}

constructor(private toastyService:ToastyService) { }

addToast() {
let interval = 1000;
let timeout = 5000;
let seconds = timeout / 1000;
let subscription: Subscription;

let toastOptions: ToastOptions = {
title: this.getTitle(seconds),
msg: this.getMessage(seconds),
showClose: true,
timeout: timeout,
onAdd: (toast: ToastData) => {
console.log('Toast ' + toast.id + ' has been added!');
// Run the timer with 1 second iterval
let observable = Observable.interval(interval).take(seconds);
// Start listen seconds beat
subscription = observable.subscribe((count: number) => {
// Update title of toast
toast.title = this.getTitle(seconds - count - 1);
// Update message of toast
toast.msg = this.getMessage(seconds - count - 1);
});

},
onRemove: function(toast: ToastData) {
console.log('Toast ' + toast.id + ' has been removed!');
// Stop listenning
subscription.unsubscribe();
}
};

switch (this.options.type) {
case 'default': this.toastyService.default(toastOptions); break;
case 'info': this.toastyService.info(toastOptions); break;
case 'success': this.toastyService.success(toastOptions); break;
case 'wait': this.toastyService.wait(toastOptions); break;
case 'error': this.toastyService.error(toastOptions); break;
case 'warning': this.toastyService.warning(toastOptions); break;
}
startLoading() {
// We can listen when loading will be completed
this.slimLoadingBarService.start(() => {
console.log('Loading complete');
});
}
}
```
Expand All @@ -159,4 +64,4 @@ export class AppComponent {
[MIT](/LICENSE)

# Credits
Inspired by [angular-toasty](https://github.com/teamfa/angular-toasty)
Inspired by [ngProgress.js](https://github.com/VictorBjelkholm/ngProgress)
Loading

0 comments on commit 28a032c

Please sign in to comment.