Skip to content

Commit

Permalink
Upgrade to rc5 and use NgModule (#10)
Browse files Browse the repository at this point in the history
* upgrade to angular rc5

* use bracket for animations

* use ngmodule to load toastr

* move import

* update readme for ngmodule

* change keywords

* prepare for release
  • Loading branch information
scttcper committed Aug 10, 2016
1 parent bb958e0 commit 1017add
Show file tree
Hide file tree
Showing 8 changed files with 126 additions and 72 deletions.
69 changes: 42 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
# toastr-ng2
Angular 2 toastr with toast creation based on [@angular2-material/core](https://github.com/angular/material2) overlay. The main difference between toastr-ng2 and other available angular 2 toastr ports is that it does not use *ngFor to display new toasts allowing for more customization and higher performance.
Angular 2 toastr with toast creation based on [@angular2-material/core](https://github.com/angular/material2) overlay. The main difference between toastr-ng2 and other available angular 2 toastr ports is that it does not use `*ngFor` to display new toasts allowing for more customization and higher performance.

Inspired by [angular-toastr](https://github.com/Foxandxss/angular-toastr) and [toastr](https://github.com/CodeSeven/toastr).

## simple setup
### install
```npm i toastr-ng2 -s```
copy [toast css](https://github.com/scttcper/toastr-ng2/blob/master/src/demo-app/demo-app.scss) to your project
### setup
add TOASTR_PROVIDERS to your bootstrap file
### install
```bash
npm i toastr-ng2 -s
```
### setup
__step 1:__ copy [toast css](https://github.com/scttcper/toastr-ng2/blob/master/src/demo-app/demo-app.scss) to your project. You can also import the css file from the npm module. It is not included with the toast component so it can be more easily overwritten. Is this a good choice? You decide.

__step 2:__ add ToastrModule to your @NgModule imports
```javascript
import { TOASTR_PROVIDERS } from 'toastr-ng2';
import { ToastrModule } from 'toastr-ng2';

bootstrap(DemoApp, [
TOASTR_PROVIDERS,
])
```
pass viewContainerRef to ToastrService
@NgModule({
bootstrap: [App],
declarations: [App],
// Import Toastr!
imports: [ ToastrModule ]
})
class ExampleMainModule {}
```

__step 3:__ pass viewContainerRef to ToastrService. This is a hack needed currently as the viewContainerRef is not available to services, but I've heard it will be eventually.
```javascript
import { ToastrService } from 'toastr-ng2';
import { Component, ViewContainerRef } from '@angular/core';
Expand All @@ -33,7 +41,8 @@ export class DemoApp {
}
}
```
show simple toast

__step 4:__ show simple toast
```javascript
this.toastrService.success('hello');
```
Expand All @@ -44,19 +53,25 @@ add to bootstrap and remove TOASTR_PROVIDERS
import { provide, Injector } from '@angular/core';
import { ToastrConfig, ToastrService, Overlay, OverlayContainer } from 'toastr-ng2';

bootstrap(DemoApp, [
OverlayContainer,
Overlay,
provide(ToastrService, {
useFactory: (overlay: Overlay, injector: Injector) => {
const customConfig = new ToastrConfig();
// override defaults here
customConfig.timeOut = 500;
return new ToastrService(customConfig, overlay, injector);
},
deps: [Overlay, Injector],
}),
]);
@NgModule({
bootstrap: [App],
declarations: [App],
// Import Toastr!
imports: [ ToastrModule ],
providers: [
provide(ToastrService, {
useFactory: (overlay: Overlay, injector: Injector) => {
// override the config defaults here
const customConfig = new ToastrConfig();
// shorter timeOut
customConfig.timeOut = 500;
return new ToastrService(customConfig, overlay, injector);
},
deps: [Overlay, Injector],
}),
]
})
class ExampleMainModule {}
```


Expand Down
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,16 @@
"node": ">4"
},
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "^0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "^0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"bootstrap": "^4.0.0-alpha.3",
"core-js": "^2.4.1",
"lodash": "^4.14.1",
"lodash": "^4.14.2",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.36",
"zone.js": "0.6.12"
Expand All @@ -42,8 +42,8 @@
"add-stream": "^1.0.0",
"angular-cli": "1.0.0-beta.10",
"broccoli-autoprefixer": "^4.1.0",
"broccoli-funnel": "^1.0.4",
"broccoli-merge-trees": "^1.1.2",
"broccoli-funnel": "^1.0.6",
"broccoli-merge-trees": "^1.1.3",
"codelyzer": "0.0.26",
"conventional-changelog": "^1.1.0",
"ember-cli-inject-live-reload": "^1.4.1",
Expand Down
9 changes: 4 additions & 5 deletions src/components/toastr/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "toastr-ng2",
"version": "0.2.0",
"version": "0.3.0",
"description": "Toastr for Angular 2",
"main": "./toastr.js",
"typings": "./toastr.d.ts",
Expand All @@ -12,19 +12,18 @@
"ng2",
"angular2",
"alerts",
"component",
"alert",
"notify",
"toastr",
"ng2-toastr",
"toastr-ng2"
"toastr-ng2",
"ngModule"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/scttcper/toastr-ng2/issues"
},
"homepage": "https://github.com/scttcper/toastr-ng2",
"peerDependencies": {
"@angular/core": "^2.0.0-rc.4"
"@angular/core": "^2.0.0-rc.5"
}
}
2 changes: 1 addition & 1 deletion src/components/toastr/toast-component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { ToastrService } from './toastr-service';
directives: [ToastProgress],
providers: [],
template: `
<div @flyInOut="state" class="{{options.toastClass}} {{toastType}}" (click)="tapToast()">
<div [@flyInOut]="state" class="{{options.toastClass}} {{toastType}}" (click)="tapToast()">
<button *ngIf="options.closeButton" class="toast-close-button" (click)="remove()">×</button>
<div *ngIf="title" class="{{options.titleClass}}" [attr.aria-label]="title">{{title}}</div>
<div *ngIf="message" class="{{options.messageClass}}" [attr.aria-label]="message">
Expand Down
10 changes: 10 additions & 0 deletions src/components/toastr/toastr-service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
provide,
Injector,
Provider,
NgModule,
} from '@angular/core';

import { Overlay } from './overlay/overlay';
Expand Down Expand Up @@ -169,3 +170,12 @@ export const TOASTR_PROVIDERS: any = [
deps: [Overlay, Injector]
})
];

@NgModule({
imports: [],
exports: [],
declarations: [],
entryComponents: [],
providers: [ToastrConfig, ToastConfig, OverlayContainer, Overlay, ToastrService],
})
export class ToastrModule { }
3 changes: 2 additions & 1 deletion src/components/toastr/toastr.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export { ToastProgress } from './progress-component';
export {
ToastrService,
TOASTR_PROVIDERS,
ActiveToast
ActiveToast,
ToastrModule
} from './toastr-service';
export { ToastrConfig, ToastConfig } from './toastr-config';
5 changes: 1 addition & 4 deletions src/demo-app/demo-app.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, ViewEncapsulation, ViewContainerRef } from '@angular/core';
import { ToastrService, ToastrConfig } from '../components/toastr/toastr';
import { ToastrConfig, ToastrService } from '../components/toastr/toastr';
import * as _ from 'lodash';


Expand Down Expand Up @@ -55,12 +55,9 @@ const types: string[] = ['success', 'error', 'info', 'warning'];

@Component({
selector: 'demo-app',
providers: [],
templateUrl: 'demo-app/demo-app.html',
styleUrls: ['demo-app/demo-app.css'],
directives: [],
encapsulation: ViewEncapsulation.None,
pipes: [],
})
export class DemoApp {
options: ToastrConfig;
Expand Down
80 changes: 56 additions & 24 deletions src/main.ts
Original file line number Diff line number Diff line change
@@ -1,31 +1,63 @@
import { bootstrap } from '@angular/platform-browser-dynamic';
import { DemoApp } from './demo-app/demo-app';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { FormsModule } from '@angular/forms';
import 'rxjs/Rx';
import 'lodash';

import { TOASTR_PROVIDERS } from './components/toastr/toastr';
import { DemoApp } from './demo-app/demo-app';
import { ToastrModule } from './components/toastr/toastr';

@NgModule({
bootstrap: [
DemoApp
],
declarations: [
DemoApp
],
imports: [
BrowserModule,
FormsModule,
ToastrModule,
],
})
class MainModule {}

// Used to test the default override
// import { TOASTR_PROVIDERS, ToastrConfig, ToastrService } from './components/toastr/toastr';
// import { provide, Injector } from '@angular/core';
// import { Overlay } from './components/toastr/overlay/overlay';
// import { OverlayContainer } from './components/toastr/overlay/overlay-container';

// for testing a custom setup
// import { NgModule, provide, Injector } from '@angular/core';
// import { BrowserModule } from '@angular/platform-browser';
// import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// import { FormsModule } from '@angular/forms';
// import 'rxjs/Rx';
// import 'lodash';
//
// import { DemoApp } from './demo-app/demo-app';
// import { ToastrModule, Overlay, ToastrConfig, ToastrService } from './components/toastr/toastr';
//
// @NgModule({
// bootstrap: [
// DemoApp
// ],
// declarations: [
// DemoApp
// ],
// imports: [
// BrowserModule,
// FormsModule,
// ToastrModule
// ],
// providers: [
// provide(ToastrService, {
// useFactory: (overlay: Overlay, injector: Injector) => {
// const customConfig = new ToastrConfig();
// customConfig.timeOut = 500;
// return new ToastrService(customConfig, overlay, injector);
// },
// deps: [Overlay, Injector],
// }),
// ]
// })
// class MainModule {}

bootstrap(DemoApp, [
disableDeprecatedForms(),
provideForms(),
TOASTR_PROVIDERS,
// OverlayContainer,
// Overlay,
// provide(ToastrService, {
// useFactory: (overlay: Overlay, injector: Injector) => {
// const customConfig = new ToastrConfig();
// customConfig.timeOut = 500;
// return new ToastrService(customConfig, overlay, injector);
// },
// deps: [Overlay, Injector],
// }),
]);
platformBrowserDynamic().bootstrapModule(MainModule);

0 comments on commit 1017add

Please sign in to comment.