stabzs / angular2-toaster Goto Github PK
View Code? Open in Web Editor NEWAngular2-toaster is an asynchronous, non-blocking Angular Toaster Notification library
License: MIT License
Angular2-toaster is an asynchronous, non-blocking Angular Toaster Notification library
License: MIT License
Hi,
I've done the basic steps to install the toaster...
But I get the following error...
Error: SyntaxError: Unexpected token <
Currently the library does not support AoT compilation due to missing metadata.json files that need to be included along with d.ts-files.
See:
https://github.com/orizens/angular2-infinite-scroll/issues/77#issuecomment-245027350
angular/angular#11262 (comment)
angular/angular#11262 (comment)
import {Component, OnInit, OnDestroy} from "@angular/core";
import {WebSocketService} from "../services/websocket.service";
import {ActivatedRoute} from '@angular/router';
import {Subscription} from "rxjs/Rx";
import {ToasterContainerComponent, ToasterService} from 'angular2-toaster/angular2-toaster';
import {User} from "../../client/user.model";
@Component({
selector: 'main',
template: `main`,
providers: [WebSocketService, ToasterService],
directives: [ToasterContainerComponent]
})
export class MainComponent implements OnInit, OnDestroy {
private sub:Subscription;
private user:User;
private toasterService:ToasterService;
constructor(private route:ActivatedRoute,
private ws:WebSocketService,
toasterService:ToasterService) {
this.user = new User();
this.toasterService = toasterService;
}
ngOnInit() {
this.sub = this.route
.params
.subscribe(params => {
this.user.room = params['room'];
this.user.name = params['name'];
this.user.lastname = params['lastname'];
});
this.init();
}
init() {
this.ws = new WebSocketService();
this.ws.run(this.onMessage);
setTimeout(() =>
this.ws.send({
name: this.user.name,
lastname: this.user.lastname,
room: this.user.room,
action: 'client_go_test'
}), 200);
}
ngOnDestroy() {
this.sub.unsubscribe();
}
onMessage(event:MessageEvent) {
console.log('onMessage');
let routes:any = {
'go_test': function (response) {
console.log(response)
},
'client_test_not_found': function (response) {
console.log(this.toaserService);
this.toasterService.pop(
'error',
response,
{
showCloseButton: true,
timeout: 5000
});
}
};
let data = JSON.parse(event.data);
if (routes.hasOwnProperty(data.action)) {
routes[data.action](data.response);
}
}
}
error on line this.toasterService.pop(
If a toast defined a different value for tapToDismiss
in its toasterConfig
compared to the global configuration, this is ignored.
My use case: I normally do not want to allow tap To Dismiss, but on some toasts I would like to perform an action on click, but is currently not possible since tabToDismiss
is set to false
.
Alternatively, execute the clickHandler
when present even if tabToDismiss
is set to false
, since this option by its name should only enable or disable the dismiss on click not the execution of a custom clickHandler
Thanks
Hey there, I didn't know how else to contact you but I wanted to say thank you! I just upped my app to the Angular 2 rc and totally thought I'd have to rip out the toaster for now. I was really impressed to see that you've already made the move.
Thanks for being an absolute gem, you've made my life very nice!
We are using this project as part of a web conferencing product. When you are busy teaching and someone makes a request to open their microphone, a modal popup message is very disruptive. Also, you may not want to open their microphone immediately... you may want to finish a thought before accepting their request.
Your toaster popup would be ideal if you could add an action button with a callback similar to onHideCallback. If the presenter clicks on the action button, then onActionCallback is fired and the microphone is opened. If the toast is dismissed, the request is ignored.
The API could be something like this:
var toast : Toast = {
type: 'info',
title: 'Mic Request',
body: 'Stabzs wants to speak. Open Mic?',
showCloseButton: true,
actionButton: 'Yes',
onHideCallback: function() { console.log('no'); },
onActionCallback: function() { console.log('yes'); }
};
this.toasterService.pop(toast);
We do not need more than 1 action, but you may want to consider it from the start and rather use this kind of an API:
var toast : Toast = {
type: 'info',
title: 'Mic Request',
body: 'Stabzs wants to speak. Open Mic?',
showCloseButton: true,
actions: [
{text: 'Yes', callback: function() { console.log('yes'); } },
{text: 'Ignore', callback: function() { console.log('ignored'); } }
],
onHideCallback: function() { console.log('no'); }
};
this.toasterService.pop(toast);
Hello,
I have followed angular.io "Get started" guide which notes the following SystemJS usage in index.html:
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
With that configuration I built fairly simple working code. Unfortunately, when I try to use angular2-toaster (I have created node_modules/angular2-toaster folder and copy/paste "lib" folder as well as angular2-toaster.js file), I don't know how to change that script in order to load it. I tried to add "map" property as seen in your demo\index.html with no success:
System.config({
packages: {
app: {
format: "register",
defaultExtension: "js"
}
},
map: {
'angular2-toaster': 'node_modules/angular2-toaster'
}
});
System.import('app/main')
.then(null, console.error.bind(console));
What happens is that I can see the browser makes request to http://localhost/node_modules/angular2-toaster/angular2-toaster
with no ".js" extension which fails.
Could you explain how to load angular2-toaster by using angular.io default index.html SystemJS usage ?
Maybe I'm missing something but I guess the documentation is wrong. First you should import Component to use the @component Annotation. Then it's always saying that ToasterModule "has no exportet member".
Am I missing something?
WARNING in ./~/angular2-toaster/lib/bodyOutputType.js
Cannot find source file '../src/bodyOutputType.ts': Error: Cannot resolve 'file' or 'directory' ../src/bodyOutputType.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib
WARNING in ./~/angular2-toaster/lib/toast.js
Cannot find source file '../src/toast.ts': Error: Cannot resolve 'file' or 'directory' ../src/toast.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib
WARNING in ./~/angular2-toaster/lib/toaster-config.js
Cannot find source file '../src/toaster-config.ts': Error: Cannot resolve 'file' or 'directory' ../src/toaster-config.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib
WARNING in ./~/angular2-toaster/lib/toaster-container.component.js
Cannot find source file '../src/toaster-container.component.ts': Error: Cannot resolve 'file' or 'directory' ../src/toaster-container.component.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib
WARNING in ./~/angular2-toaster/lib/toaster.service.js
Cannot find source file '../src/toaster.service.ts': Error: Cannot resolve 'file' or 'directory' ../src/toaster.service.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib
MY app.ts
/*
* Angular 2 decorators and services
*/
import {Component} from 'angular2/core';
import {RouteConfig, Router} from 'angular2/router';
import {Home} from './home/home';
import {HeaderComponent} from './header/header';
import {Admin} from './admin/admin';
import {ToasterContainerComponent, ToasterConfig} from 'angular2-toaster/angular2-toaster';
/*
* App Component
* Top Level Component
*/
@Component({
selector: 'app',
directives: [HeaderComponent, ToasterContainerComponent],
providers: [],
pipes: [],
styles: [`
main {
font-size: 1rem;
line-height: 1.5;
color: #666;
background-color: #ededed;
}
:global(body) {
color: #666;
background-color: #ededed;
}
`],
template: `
<header-component></header-component>
<ToasterContainerComponent></ToasterContainerComponent>
<main>
<router-outlet></router-outlet>
</main>
`
})
@RouteConfig([
{ path: '/', component: Home, name: 'Index' },
{ path: '/home', component: Home, name: 'Home' },
])
export class App {
constructor() {
}
public toasterconfig: ToasterConfig =
new ToasterConfig({
showCloseButton: false,
positionClass: "toast-top-center",
tapToDismiss: true,
timeout: 3000
});
}
My webpack.config 👍
// @AngularClass
var webpack = require('webpack');
var helpers = require('./helpers');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var ENV = process.env.ENV = process.env.NODE_ENV = 'development';
var HMR = helpers.hasProcessFlag('hot');
var autoprefixer = require('autoprefixer');
var metadata = {
title: 'Cổng thông tin game lớn nhất Việt Nam | NETVIVU',
baseUrl: '/',
host: 'localhost',
port: 3000,
ENV: ENV,
HMR: HMR
};
/*
* Config
* with default values at webpack.default.conf
*/
module.exports = {
// static data for index.html
metadata: metadata,
devtool: 'cheap-module-eval-source-map',
// cache: true,
debug: true,
// devtool: 'eval' // for faster builds use 'eval'
// our angular app
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'] // <-- include .scss
},
// Config for our build files
output: {
path: helpers.root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
module: {
preLoaders: [
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
// TODO(gdi2290): `exclude: [ helpers.root('node_modules/rxjs') ]` fixed with rxjs 5 beta.3 release
{ test: /\.js$/, loader: "source-map-loader", exclude: [helpers.root('node_modules/rxjs')] }
],
loaders: [
// Support for .ts files.
{ test: /\.ts$/, lo
```ader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/] },
// Support for *.json files.
{ test: /\.json$/, loader: 'json-loader' },
// Support for CSS as raw text
{ test: /\.css$/, loader: 'raw-loader' },
// support for .html as raw text
{ test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] },
// if you add a loader include the resolve file extension above
{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader?sourceMap'] },
// { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000', exclude: [helpers.root('node_modules')] },
// Bootstrap 4
{ test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery', exclude: [helpers.root('node_modules')] },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
// sassResources: path.resolve(__dirname, "./node_modules/bootstrap/scss"),
postcss: [autoprefixer], // <--- postcss
plugins: [
new ForkCheckerPlugin(),
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({ name: ['app', 'vendor', 'polyfills'], minChunks: Infinity }),
// static assets
new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
// generating html
new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none' }),
// Environment helpers (when adding more properties make sure you include them in custom-typings.d.ts)
new webpack.DefinePlugin({
'ENV': JSON.stringify(metadata.ENV),
'HMR': HMR
}),
// jQuery, Tether
new ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
"Tether": 'tether',
"window.Tether": "tether",
"CKEDITOR": "CKEDITOR"
})
],
// Other module loader config
// our Webpack Development Server config
tslint: {
emitErrors: false,
failOnHint: false,
resourcePath: 'src',
},
devServer: {
port: metadata.port,
host: metadata.host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
node: {
global: 'window',
process: true,
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
};
Thanks for a great library!
The examples provided are clear and works great! However, the timeout does not seem to work and the popups do not disappear after 5 seconds. Even specifying a timeout does not work.
Trying to run your component and get this error right from app start:
i get exports not defined:
exports.BodyOutputType = require('./lib/bodyOutputType').BodyOutputType;
exports.Toast = require('./lib/toast').Toast;
exports.ToasterConfig = require('./lib/toaster-config').ToasterConfig;
exports.ToasterContainerComponent = require('./lib/toaster-container.component').ToasterContainerComponent;
exports.ToasterService = require('./lib/toaster.service').ToasterService;
I am including your script in a combined output script named common.js
it is bundled with the following scripts
createLibFolderObj("systemjs", "systemjs/dist/system.src.js"),
createLibFolderObj("angular2", "angular2/bundles/angular2.dev.js"),
createLibFolderObj("angular2", "angular2/bundles/router.dev.js"),
createLibFolderObj("angular2", "angular2/bundles/http.dev.js"),
createLibFolderObj("rxjs", "rxjs/bundles/Rx.js"),
createLibFolderObj("toastr", "angular2-toaster/angular2-toaster.js")
Any ideas what could be wrong. from the limited examples provided i have eveything setup as suggested.
My current versions are:
"angular2": "^2.0.0-beta.11",
"bootstrap": "^3.3.6",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"font-awesome": "^4.5.0",
"reflect-metadata": "0.1.3",
"rxjs": "^5.0.0-beta.3",
"systemjs": "^0.19.24",
"zone.js": "^0.6.5",
"angular2-toaster": "0.1.0-beta.2"
Hi,
I try to handle toast clicks, so I attached a function to the ClickHandler :
let toast: Toast = {
type: 'info',
title: title,
body: 'Click here to cancel',
showCloseButton: true,
timeout: 9000,
clickHandler: (toast , isCloseButton) => {
console.log("isCloseButton : "+isCloseButton);
return true;
}
};
this.toastr.pop(toast);
But the function is called twice when the user press the exit button.
Have I missed something ?
First of all thanks for this useful library!
It would be nice to have an observable in the ToasterService
which notifies when a toast has been removed, regardless of the reason. It would the opposite of the addToast
observable
I you like I could make a pr with this feature.
Update test structure to run correctly on CI.
I'm getting this error when I am running my tests. I am using angular2-seed.
When running npm test
I was initially getting: 404: /base/angular2-toaster/angular2-toaster.js
That issue was easily fixed by adding 'node_modules/angular2-toaster/angular2-toaster.js'
to my karma.conf.js
file.
After adding that, I began getting the error ReferenceError: Can't find variable: exports
Hi,
i've an error when i use Angular2-toaster with angular2 rc.0. The toaster appears and i have this exception in the console :
EXCEPTION: Error: Uncaught (in promise): TypeError: callback.apply is not a function
[...]
Thanks for your help,
best regards
As I've checked in the inspiration example located at http://codeseven.github.io/toastr/demo.html,
using inside the toast content shows an image. While I've been trying to do that in this module, I got the following:
Is there any option to implement images in a toast or this feature is not yet implemented?
When I run a toaster it's working but it is also trigger an error in zone.js
I'm using:
browser_adapter.ts:73 Error: More tasks executed then were scheduled.
at ZoneDelegate._updateTaskCount (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:398:24)
at ZoneDelegate.invokeTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:369:27)
at Zone.runTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:263:48)
at ZoneTask.invoke (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:431:34)
------------- Elapsed: 5004 ms; At: Fri Apr 15 2016 08:17:01 GMT+0200 (CEST) -------------
at Object.Zone.longStackTraceZoneSpec.onScheduleTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:1354:23)
at ZoneDelegate.scheduleTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:342:50)
at Zone.scheduleMacroTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:283:40)
at https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:133:26
at setTimeout (eval at createNamedFn (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:973:18), <anonymous>:3:37)
at ToasterContainerComponent.configureTimer (http://localhost:8000/node_modules/angular2-toaster/lib/toaster-container.component.js:136:38)
at ToasterContainerComponent.addToast (http://localhost:8000/node_modules/angular2-toaster/lib/toaster-container.component.js:113:14)
at SafeSubscriber.eval [as _next] (http://localhost:8000/node_modules/angular2-toaster/lib/toaster-container.component.js:70:19)
------------- Elapsed: 2 ms; At: Fri Apr 15 2016 08:17:01 GMT+0200 (CEST) -------------
at Object.Zone.longStackTraceZoneSpec.onScheduleTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:1354:23)
at ZoneDelegate.scheduleTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:342:50)
at Zone.scheduleMacroTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:283:40)
at https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:133:26
at setTimeout (eval at createNamedFn (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:973:18), <anonymous>:3:37)
at ToasterService.popAsync (http://localhost:8000/node_modules/angular2-toaster/lib/toaster.service.js:31:9)
at Home.ok (http://localhost:8000/app/mysew-app.js:63:35)
at AbstractChangeDetector.ChangeDetector_Home_0.handleEventInternal (viewFactory_Home:131:21)
Hi, got this error any idea ?
I tried using angular2-toaster with the most simplest example. Tried exactly the way mentioned in Readme. and got the following:
I downloaded angular2-toaster from npm which gave me 0.1.0-beta.3
Tried making a very basic use on my app.ts (my root component) as mentioned in examples on Readme.md
Getting the following:
EXCEPTION: No Directive annotation found on ToasterContainerComponent
BaseException {message: "No Directive annotation found on ToasterContainerComponent", stack: "Error: No Directive annotation found on ToasterCon…/polyfills.bundle.js:1152:2), :274:21)"}
`
Error: Uncaught (in promise): No Directive annotation found on ToasterContainerComponent
zone.ts?949c:855 Unhandled Promise rejection: No Directive annotation found on ToasterContainerComponent ; Zone: angular ; Task: Promise.then ; Value:
Can you please update? I appreciate it very much!
Hi there!
Can you tell me why Angular 2 and RxJS is in "dependencies" instead of "peerDependencies" as it should be? Angular2-Toaster goes as a "plugin", not standalone service, right? Check https://github.com/valor-software/ng2-bootstrap/blob/development/package.json for example.
This is an awesome project, but the colors can be more modern looking. It would be nice to use the Bootstrap colors as many project integrate with it already.
http://getbootstrap.com/components/#alerts-examples
Here is my CSS hack to change the colors:
#toast-container > .toast-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.toast-success .toast-close-button {
color: #3c763d;
}#toast-container > .toast-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.toast-info .toast-close-button {
color: #31708f;
}#toast-container > .toast-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.toast-warning .toast-close-button {
color: #8a6d3b;
}
#toast-container > .toast-error {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.toast-error .toast-close-button {
color: #a94442;
}
.toaster-icon {
filter: invert(0.5);
}
#toast-container > div {
opacity: 1;
border: 1px solid transparent;
border-radius: 4px;
}
When I navigate away from the component app throws exception complaining dispose() function is undefined:
EXCEPTION: TypeError: this.addToastSubscriber.dispose is not a function. (In 'this.addToastSubscriber.dispose()', 'this.addToastSubscriber.dispose' is undefined)
here is the code location:
https://github.com/Stabzs/Angular2-Toaster/blob/master/src/toaster-container.component.ts#L219
btw thanks for putting up this awesome project!
When using angular2-toaster with the latest version of angular 2 and zone.js, an exception is thrown when removeToast() is called in the callback of the SetTimeout() function. The reason is because removeToast is calling clearTimeout which the timeout is no longer registered because it already expired.
I resolved this by changing:
toast.timeoutId = window.setTimeout(() => {
this.removeToast(toast);
}, timeout);
to:
toast.timeoutId = window.setTimeout(() => {
toast.timeoutId = null;
this.removeToast(toast);
}, timeout);
The current documentation for this module indicates the current version is 0.3.6-rc.5, however that version is not published to the public NPM registry.
Can this be published to NPM?
When compiling with @Angular/Compiler-cli it throws Error: Unexpected value 'ToasterModule' imported by the module 'AppModule'
Angular 2 RC6
ngc -p tsconfig.json
please update dependencies to angular2 rc2
... as per issue title ... Thank you
I have a situation where I issue the pop, and then issue a route navigate. The toast message doesn't display with the route. When I remove the route it works. Any ideas how to get around this?
Currently I'm getting some warnings in the component:
WARNING in ./~/angular2-toaster/src/toaster-container.component.js
Cannot find source file 'toaster-container.component.ts': Error: Cannot resolve 'file' or 'directory' ./toaster-container.component.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src
WARNING in ./~/angular2-toaster/src/toaster.service.js
Cannot find source file 'toaster.service.ts': Error: Cannot resolve 'file' or 'directory' ./toaster.service.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src
WARNING in ./~/angular2-toaster/src/bodyOutputType.js
Cannot find source file 'bodyOutputType.ts': Error: Cannot resolve 'file' or 'directory' ./bodyOutputType.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src
WARNING in ./~/angular2-toaster/src/toast.js
Cannot find source file 'toast.ts': Error: Cannot resolve 'file' or 'directory' ./toast.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src
WARNING in ./~/angular2-toaster/src/toaster-config.js
Cannot find source file 'toaster-config.ts': Error: Cannot resolve 'file' or 'directory' ./toaster-config.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src
`
Any ideas on how to resolve this?
This template parse error is from ToastComponent
@7:16
Thanks a lot for your help!
Cheers,
Jay Kan
toasterService.pop returns a toast object.
I need a way to close / remove that toast at a later time when it is not applicable anymore. There might be multiple toasts displayed, but I need to remove a specific item.
For example, the toast may indicate that someone is requesting that their microphone is opened, but then change their mind. So it is important to remove the toast when it is not valid anymore.
Hello, i have tried to override the timeout for errors to make them sticky and it does not work.
I have tried the below and no matter what, it goes away after 5 seconds.
var toasterconfig : ToasterConfig = new ToasterConfig({timeout: {error:0 }});
var toast : Toast = {
type: "error",
title: title,
body: message,
showCloseButton: true,
toasterConfig: toasterconfig
};
this.toasterService.pop(toast);
var toast : Toast = {
type: "error",
title: title,
body: message,
showCloseButton: true,
timeout: 0
};
this.toasterService.pop(toast);
Hey,
Just wanted to shoot over an issue caused by a "breaking" change in beta 17
Inside of structural directives that declare local variables, such as *ngFor, usage of #... is deprecated. Use let instead.
(ref https://github.com/angular/angular/blob/master/CHANGELOG.md)
The following is the new warning caused by the Angular2-Toaster container component template.
Template parse warnings:
"#" inside of expressions is deprecated. Use "let" instead! ("="[toasterconfig.positionClass, toasterconfig.animationClass]" class="ng-animate">
<div [ERROR ->]*ngFor="#toast of toasts" class="toast" [ngClass]="toasterconfig.typeClasses[toast.type]" (click)="cl"): ToasterContainerComponent@2:17
Should be a simple fix & I'd be happy to help with a PR! Thanks!
I use authorization component which checks if user is authorize to see protected page where I have and SimpleNotificationsComponent. In case of unauthorized attempt, the authorization component uses Router and navigates to login page. And in that case I got:
Unhandled promise rejection TypeError: Cannot read property 'unsubscribe' of undefined(…)
which leads to NotificationComponent and:
ngOnDestroy()
{
this.addToastSubscriber.unsubscribe()
this.clearToastsSubscriber.unsubscribe()
}
It is probably because of component not being initializes in ngOnInit.
Hi, thanks for this component.
Seems to be useful.
But as it is, we can't use is, because it is missing a package / bundle, which we could easily include in our project. We aren't using Webpack and we aren't deploying Node modules.
Would be great, thanks.
Hi, I'm new to webpack can you tell me how to link your scc using webpack?
Upgrading to Angular 2 rc.2 causes me to start getting the following error.
Reproduced in new clone of https://github.com/AngularClass/angular2-webpack-starter when following the Getting Started with Default Configuration instructions.
Missing import { Core_Directives } from '@angular/common'; line 44
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'ngSwitchCase' since it isn't a known native property ("ngClass]="toast.toasterConfig.messageClass" [ngSwitch]="toast.bodyOutputType">
<div [ERROR ->]*ngSwitchCase="bodyOutputType.Component" #componentBody></div>
<div *ngSwitchCase="bo"): ToastComponent@5:21
Property binding ngSwitchCase not used by any directive on an embedded template ("div [ngClass]="toast.toasterConfig.messageClass" [ngSwitch]="toast.bodyOutputType">
[ERROR ->]<div *ngSwitchCase="bodyOutputType.Component" #componentBody></div>
<div *ngSwitchCas"): ToastComponent@5:16
Can't bind to 'ngSwitchCase' since it isn't a known native property (" <div *ngSwitchCase="bodyOutputType.Component" #componentBody></div>
<div [ERROR ->]*ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="toast.body"></div>
<div *ngSw"): ToastComponent@6:21
Property binding ngSwitchCase not used by any directive on an embedded template (" <div *ngSwitchCase="bodyOutputType.Component" #componentBody></div>
[ERROR ->]<div *ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="toast.body"></div>
<div "): ToastComponent@6:16
Can't bind to 'ngSwitchCase' since it isn't a known native property ("div *ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="toast.body"></div>
<div [ERROR ->]*ngSwitchCase="bodyOutputType.Default">{{toast.body}}</div>
</div>
</div>
"): ToastComponent@7:21
Property binding ngSwitchCase not used by any directive on an embedded template (" <div *ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="toast.body"></div>
[ERROR ->]<div *ngSwitchCase="bodyOutputType.Default">{{toast.body}}</div>
</div>
</div>
"): ToastComponent@7:16
I don't know if maybe we need to update toaster in to a module?
The package is currently incompatible with RC.6 of Angular 2 due to the removal of ComponentResolver
and the renaming of DomSanitizationService
to DomSanitizer
Please update dependencies.
I'm using angular2-toaster with angular-2 rc.2, and I get this error above. I have an example set up exactly like that on the front page, with the <toaster-container></toaster-container>
in the template.
Any chance we could have a global toaster-container (say in the root component), and fire toasts from child components using only the service injection ?
Thanks
Since I'm using Webpack at the moment, SystemJS seems redundant.
I think that's a project specific choice to be made. Since this is a 3rd party module, shouldn't it just conform to the typescript es6 export format?
I tried the following code:
var toast : Toast = {
type: 'info',
title: 'Check',
body: 'Are you sure you want to do this?<br/><button md-button (click)="freeUser()">I'm sure</button>',
bodyOutputType: BodyOutputType.TrustedHtml
};
this.toasterService.pop(toast);
Unfortunetly the click event not working, so my question is, if there is any way to make custom button with some action in a toast body?
I have a suggestion.
Your icon classes are all named icon-*
Would be possible to rename them to a more specific name?
Many font libraries out there are already using icon-, so there will be conflicts with existing class names. So I have now to rename your classes in our app.
Thanks
Hi,
first of all, thank you for this great library.
I want to show a toast for failed http-Requests thus I want to use it from a service.
Can I do this? Or is there a better way?
Regards
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.