Giter Site home page Giter Site logo

ng2-toasty's Issues

[2.2.1] Please update README about providers.

  • I'm submitting a ...
    [ ] bug report
    [*] feature request
    [ ] question about the decisions made in the repository

  • Do you want to request a feature or report a bug?
    Just for document update request.

  • What is the current behavior?
    From 2.2.1, user's module that imports ToastyModule also needs to set providers by

providers: [ToastyService, ToastyConfig]

so please update the readme. If not set, error is displayed to console like this

No provider for ToastyConfig!

  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

  • What is the expected behavior?

  • What is the motivation / use case for changing the behavior?

  • Please tell us about your environment:

Angular version: 2.4.1
Angular CLI: beta. 24
ng2-toasty: 2.2.1

  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Global timeout not working

The global timeout is not every used. Timeout only gets set if a truthy value is passed on the options and since it is truthy, the global never gets used. From toasty.service.ts
if (toastyOptions.timeout) { toast.timeout = toastyOptions.timeout || this.config.timeout; } else { toast.timeout = null; }

Maybe it should be...
toast.timeout = toastyOptions.hasOwnProperty('timeout') ? toastyOptions.timeout : this.config.timeout;

Anytime the caller passes a value, it is used. Allows a caller to pass null/0 and override the default (I prefer errors to stay until cleared, the rest can timeout). Can also set the default to null/0 to turn off.

How to set potition?

How to change position from default bottom-right to top-right. I tried this.toastyConfig.position = 'top-right'; but nothing was changed

  • Angular version: 2.0.0

No styles included

I can't find how to include the styles used by this component. The DOM elements get inserted correctly, but no CSS is injected.

Cannot read property 'next' of undefined

TypeError: Cannot read property 'next' of undefined(…)
toasty.service.js:158 !!! Suggestion: Seems you forget add into your html?

This code has a exception in toasty.service.ts page

// Push up a new toast item try { this.toastsSubscriber.next(toast); // **# has a exception** // If we have a onAdd function, call it here if (toastyOptions.onAdd && isFunction(toastyOptions.onAdd)) { toastyOptions.onAdd.call(this, toast); } } catch (e) { console.log(e); console.log('!!! Suggestion: Seems you forget add <ng2-toasty></ng2-toasty> into your html?'); }

But I have added the code in the html page

excuse me I should be?

Build script failed in Windows

  • I'm submitting a ...
    [X] bug report

npm run build running on Windows throw:

'cp' is not recognized as an internal or external command, operable program or batch file.

All toasts gets cleared upon clearing an individual toast

  • I'm submitting a ...
    [x ] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?
    Bug
  • What is the current behavior?
    All toasts gets cleared when you clear only an individual toast
  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.
    Show a toast of any type with an timeout of null then show another toast with an timeout of null.
  • What is the expected behavior?
    Only the toast with the provided id should be cleared the rest should stay on the screen
  • What is the motivation / use case for changing the behavior?
    It's a bug, i shoulnt work like that
  • Please tell us about your environment:
  • Angular version: 2.0.0
  • Browser: [all ]
  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Allow position in options [Feature Request]

  • I'm submitting a ...
    [ ] bug report
    [x] feature request
    [ ] question about the decisions made in the repository

  • Do you want to request a feature or report a bug?

I would like to have the options to set the toast position using options rather than change configuration

show toasty in center of screen

In ng2-toasty, I can see these options-
bottom-right, bottom-left, top-right, top-left, top-center, bottom-center

How do I show toasty message center of screen?

My use-case is, I want to show one toasty message center of screen. limit property allow me show only one message. But position property have above mentioned options.

Environment:
Angular2 version 2.0.0
ng2-toasty version 2.0.1

No ToastyModule exported

  • I'm submitting a ...
    [x] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?

Bug

  • What is the current behavior?

ng2-toasty has no exported member 'ToastyModule'.

  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

ng new ng2-toasty

  • What is the expected behavior?

There should be a ToastyModule

  • What is the motivation / use case for changing the behavior?
  • Please tell us about your environment:
  • Angular version: 2.0.0-rc.6
  • Browser: [all]
  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Angular 2 RC.6 - Toasty Module.

I've updated to RC.6 and Toasty is not adjusting well!

In the Component decorator, I'm getting error on the line where I'm passing 'ToastyComponent' into the directives array. I would prefer to add a module in to my app.module.ts file instead...

import { Component } from '@angular/core';

import { ToastyComponent } from 'ng2-toasty';

import { Auth } from './auth.service';
import { NotificationService } from './shared/notification.service';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    directives: [ ToastyComponent ],
    providers: [
                Auth,
                NotificationService]
})
export class AppComponent {
    constructor(private _auth: Auth) {
    }
}

Cannot read property 'getOptional' of undefined

I'm trying to implement ng2-toasty in a project i'm working on, but as soon as I add ToastyServices or ToastyConfig to the bootstrap, there is an error thrown. I am compiling to ES5, using ng2-bootstrap 1.0.7 and using angular2 beta9. I also tried following the tutorial step by step but as soon as I get too the bootstrap part, it gives me the same issue. Have you run into anything like this?

Angular 2.0.0 compatibility

  • I'm submitting a ...
    [ ] bug report
    [x] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?

Feature

  • What is the current behavior?

No worky

  • What is the motivation / use case for changing the behavior?

Support Angular version 2.0.0

  • Please tell us about your environment:
  • Angular version: 2.0.0
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Build fails with Typescript 2.0

  • I'm submitting a ...
    [X] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?
    This is a bug generated by webpack when typescript version is upgraded to 2.0.0. Assuming that all future versions of typescript will have the same behaviour.
  • What is the current behavior?
    On application build with webpack this is the error outputted :
ERROR in ./~/ng2-toasty/ng2-toasty.ts
Module build failed: Error: Typescript emitted no output for /Users/jp/workspace/admin_angular2/node_modules/ng2-toasty/ng2-toasty.ts
    at Object.loader (/Users/jp/workspace/admin_angular2/node_modules/ts-loader/index.js:456:15)
  • Please tell us about your environment:
  • Angular version: 2.0.0-rc.4
  • Webpack 1.13.1
  • ts-loader 0.8.2
  • ng2-toasty: 1.8.0

On click function

  • I'm submitting a ...
    [ ] bug report
    [x] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?

I want to request a feature. Can U provide a click event and a way to pass some data that will be pass to onclick function...

  • What is the current behavior?
  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.
  • What is the expected behavior?

I want to do some things when user clicks on a message. Is this possible?

  • What is the motivation / use case for changing the behavior?
  • Please tell us about your environment:
  • Angular version: 2.0.0-rc.X
  • Browser: [all ]
  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

update angular dependencies

  • I'm submitting a ...
    [x] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository

ng2-toasty depends on the angular version 2.0.0 but the current angular version is 2.2.4. This repository should be updated.

WARNING export 'ToastData' was not found in './toasty.service'

  • I'm submitting a ...
    [x ] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?
    a bug
  • What is the current behavior?
    When serving, I get:
    WARNING in ./~/ng2-toasty/src/toasty.component.ts
    33:55 export 'ToastData' was not found in './toasty.service'

Toasts are not generated

  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

I have created a new project via Angular-cli, the latest from master (with webpack) and then added toasty as per your guidelines.

  • What is the expected behavior?
    That it works?
  • What is the motivation / use case for changing the behavior?
  • Please tell us about your environment:
    "@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/router": "3.0.0-beta.2",
    "angular2-localstorage": "^0.4.0",
    "core-js": "^2.4.0",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.0.24",
    "ng2-toasty": "^1.8.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.6.12"
  • Browser: all
  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Need to manually put ToastyConfig in providers section

  • I'm submitting a ...
    [X] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository

  • What is the current behavior?

If you do not put ToastyConfig into providers it throws an error:

EXCEPTION: No provider for ToastyConfig!

  • What is the expected behavior?

I should not have to put ToastyConfig into my providers section

  • Angular version: 2.4.1

Toast with no style

Hello,

I installed your component but when I click on my button the message appears and disappears but without any css :
capture d ecran 2016-04-13 a 16 30 45

Could you help me find my error :/

System.config({
            defaultJSExtensions: true,
            packages: {
                angular2: { defaultExtension: false },
                rxjs: { defaultExtension: false }
            },
            map: {
                'ng2-toasty': 'node_modules/ng2-toasty',
                'ng2-dnd': 'node_modules/ng2-dnd',
                'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
            }
      });

import {ToastyService, ToastyConfig} from 'ng2-toasty/ng2-toasty';

bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS, DND_PROVIDERS, ToastyService, ToastyConfig]);

import {ToastyService, ToastyConfig, Toasty, ToastOptions, ToastData} from 'ng2-toasty/ng2-toasty';
...
directives: [DND_DIRECTIVES, MODAL_DIRECTIVES, SpinnerComponent, RouterLink, CreateSectionComponent, Toasty],
...
constructor(private _service: DocumentsService, private _router: Router, private _routeParams: RouteParams, private toastyService:ToastyService) { }

    output() {
        this.toastyService.default('Hi there');    
    }

And I add <ng2-toasty></ng2-toasty> in the html file.

Thank you for your time.

Feature : Timeout independent toast + support for multiple line messages

  • I'm submitting a ...
    [ ] bug report
    [ *] feature request
    [ ] question about the decisions made in the repository

  • Do you want to request a feature or report a bug?

    Feature to prevent auto close of the toast. That is making it timeout independent. which cant be closed until user clicks 'close' or its closed programmatically.

    plus

    It would be great if we could change lines within error message. escape character '\n'

  • What is the current behavior?

    Currently , to prevent auto close , we need to set very large timeout. like random 50000. that can be closed programmatically whenever needed.

  • What is the expected behavior?
    If timeout is set to 0 , it should prevent close untill user clicks close/programmatically.

  • What is the motivation / use case for changing the behavior?


    Displaying validation errors in a toast. which should stay active until user notices/reads them. and multiple validation errors on multiple lines.

  • Please tell us about your environment:

  • Angular version: 2.0.0-rc.4

  • Browser: all

Consider changing library name

  • I'm submitting a ...
    [X] question about the decisions made in the repository

As you may know, the next version of Angular to be released is 4.0

They will be following semver after that. Many libraries which had ng2- in their name are moving away from the convention.

I have seen some change to ngx, some to home made prefixes, and of course other options as well.

I would consider rebranding to a new name.

Why ng2-toasty compile

I have a question. Why when I add
import {ToastyService, ToastyConfig, Toasty, ToastOptions, ToastData} from 'ng2-toasty/ng2-toasty';
to my main.ts automatically ng2-toasty is compiled and output go (/build/node_modules/ng2-toasty) with my others components. When this occur, i get an error (i suppose because i didn't see it on console) that avoid compile all components and i can´t run the project. This doesn't occur with other projects like "ng2-select" or "ng2-table" both of them in my project and they don't compile, only i use them.

Add clearToast to service

Need a clear(id) method added to ToastyService. I know there is clearAll() method but I need to be able to clear a single toast from code.

Example:

I'm using a toastyService.wait() toast to display a wait message to the user. The relevant configuration for this toast is:
toastOptions = {
...
showClose: false,
timeout: 0,
...
}

This allows the toast to remain on the screen indefinitely. Now when certain conditions are met, I want to be able to remove that wait toast (and only that toast).

Use toasty with routing

Can you help me understand how to use toasty with routing.
I have route to new user "/user/add" and route to all users "/users" in my app.
I want that when i clicked "onSave()" (in user-add.component) will displays the toasty message and redirect to a page with all users (users-list.component).
I have this code in user-add.component:
onSave(){ this.submitted = true; this.userService.addUser(this.user) .then(() => this.notify.emit('User saved!')) .then(() => this.goBack()) .catch(error => this.errorMessage = error);
But it works only on a same page.

Update title and msg

Hi,

is it possibile to update the message dynamically? Can you implemnt something like that?

I use an Rx.Observable and count 10 seconds and I have to update the test in the message box.

I do something like that and i would update the variable seconds!

newToast() {
        let seconds = 10;

        var toastOptions: ToastOptions = {
            title: 'Do something',
            msg: seconds + ' seconds',
            showClose: false
        };

        this.toastyService.wait(toastOptions);

        const source$ = Observable.interval(1000)
            .take(seconds);

         source$.subscribe(
             (count)  => console.log(count),
             (err)      => console.error('Error: ${err}'),
             ()         => this.toastyService.clearAll()
         );
    }
 }

thx
Michael

Remove out of date dependencies

npm WARN deprecated [email protected]: TSD is deprecated in favor of Typings (https://github.com/typings/typings) - see DefinitelyTyped/tsd#269 for more information
npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated [email protected]: Please update conventional-changelog to >1.0.0. If you are running the cli, use conventional-changelog-cli
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

Change Position of Toast

I see you have the css for different positions, but it isn't an option I can pass to toast options?

toasty.service.ts:13 Uncaught TypeError: Cannot read property 'Injectable' of undefined

  • I'm submitting a ...
    [x ] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository

  • What is the current behavior?

When application starts, a javascript error appears in the console, thrown by toasty.service.ts :

Uncaught TypeError: Cannot read property 'Injectable' of undefined
    at eval (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:113:74)
    at Object.module.exports (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:117:2)
    at __webpack_require__ (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:30:30)
    at Object.eval (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:582:78)
    at __webpack_require__ (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:30:30)
  • Please tell us about your environment:

My app.module.ts:

import {ToastyModule} from "ng2-toasty";

...
 imports: [
    ToastyModule.forRoot(),
    ...

My package.json:

{
  "name": "clinica",
  "version": "10.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.6",
    "@angular/compiler": "^2.4.6",
    "@angular/core": "^2.4.6",
    "@angular/forms": "^2.4.6",
    "@angular/http": "^2.4.6",
    "@angular/platform-browser": "^2.4.6",
    "@angular/platform-browser-dynamic": "^2.4.6",
    "@angular/router": "^3.4.4",
    "@swimlane/ngx-datatable": "6.0.2",
    "angular2-jwt": "^0.1.25",
    "animate.css": "^3.5.2",
    "bootstrap-sass": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "ng2-bootstrap": "1.3.3",
    "ng2-charts": "^1.4.1",
    "ng2-select": "^1.1.2",
    "ng2-toasty": "^2.3.1",
    "ng2-uploader": "2.0.0",
    "rxjs": "^5.0.3",
    "tinymce": "^4.5.2",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.30",
    "@angular/compiler-cli": "^2.4.6",
    "@types/jasmine": "2.5.41",
    "@types/node": "^7.0.5",
    "codelyzer": "~2.0.0-beta.2",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.1",
    "ts-node": "1.2.1",
    "tslint": "^4.3.1",
    "typescript": "2.0.3"
  }
}

Toasty seems to be working, but I can't figure out why this error is being thrown in the console when the application loads (but just before starting). There's nothing special on the way toasty is being loaded, as it's being loaded like any other dependency, but I can't figure out why I have this error with Toasty but not with another dependency...

Cannot Resolve

  • I'm submitting a ...
    [X ] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository

  • Do you want to request a feature or report a bug?

This is a new bug

  • What is the current behavior?

Has been working fine for a few day. Suddenly started to get:
metadata_resolver.js:499Uncaught Error: Can't resolve all parameters for ToastyService: (?).(…)

  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

  • What is the expected behavior?

The Service is available for DI

  • What is the motivation / use case for changing the behavior?

  • Please tell us about your environment:

angular-cli: 1.0.0-beta.20-4
node: 6.7.0
os: darwin x64
Chrome

  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import {appRoutes} from "./app.routes";

import { SourceComponent } from './source/source.component';
import { ReportComponent } from './report/report.component';
import { LensComponent } from './lens/lens.component';
import { HistoryComponent } from './history/history.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import {SourceService} from "./source/source.service";
import {FileUploadComponent} from "./source/upload.component";
import {ToastyModule, ToastyService, ToastyConfig} from 'ng2-toasty';
import { NavbarComponent } from './navbar/navbar.component';
import {LensService} from "./lens/lens.service";
import { LoadersCssModule } from 'angular2-loaders-css';
import { ModifiersComponent } from './modifiers/modifiers.component';
import {ReportService} from "./lens/reports.service";

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    SourceComponent,
    ReportComponent,
    LensComponent,
    HistoryComponent,
    PageNotFoundComponent,
    FileUploadComponent,
    NavbarComponent,
    ModifiersComponent,
  ],
  imports: [
    ToastyModule.forRoot(),
    BrowserModule,
    FormsModule,
    HttpModule,
    appRoutes,
    LoadersCssModule,
  ],
  providers: [ToastyConfig, ToastyService, SourceService, LensService, ReportService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Implementation:

import {Component, OnInit} from '@angular/core';
import {Observable} from "rxjs";
import {Headers, RequestOptions, Response} from "@angular/http";
import {ToastOptions, ToastData, ToastyService, ToastyConfig} from "ng2-toasty";

@Component({
  selector: 'app-source',
  templateUrl: './source.component.html',
  styleUrls: ['./source.component.css']
})
export class SourceComponent implements OnInit {
  
  public sources: Observable<DTOSourceFile[]>;
  public toastOptions: ToastOptions;
    
  constructor(public service: SourceService, private toastyService: ToastyService, private toastyConfig: ToastyConfig) {
  }
  
  ngOnInit() {
    this.initToast();
    this.sources = this.service.source;
    this.service.loadAll();
  }
  
  initToast() {
    this.toastyConfig.theme = 'material';
    this.toastyConfig.position = "top-right";
    this.toastOptions = {
      title: "",
      msg: "",
      showClose: true,
      timeout: 5000,
      theme: "material",
      onAdd: (toast: ToastData) => {
        console.log('Toast ' + toast.id + ' has been added!');
      },
      onRemove: function (toast: ToastData) {
        console.log('Toast ' + toast.id + ' has been removed!');
      }
    };
  }

It is not possible to use the plugin without SystemJs/ Cannot read property 'toString' of undefined

I'm submitting a ...
[x] bug report
[ ] feature request
[ ] question about the decisions made in the repository

What is the current behavior?

It is not possible to use the plugin when SystemJs isn't use ( For example we use babelify).

The following error appears when the app starts:

Uncaught TypeError: Cannot read property 'toString' of undefined

in this code line in toast.component.ts
moduleId: module.id.toString(),

and also in this code line in toasty.component.ts
moduleId: module.id.toString(),

Please tell us about your environment:

  • Angular version: 2.0.1 with babelify
  • Browser: [all ]

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

You can use the module.id variable which contains the absolute URL of the component class only with SystemJs.

Solution: You can remove this line of code because you don't include templates or stylesheets relative to your component. Maybe you can find here more detail information about this (http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html)

Animating toast in and out

  • I'm submitting a ...
    [ ] bug report
    [x ] feature request
    [ ] question about the decisions made in the repository

  • feature
    Is it possible to easily add an animation (e.g. fade in or slide in) to all toast messages?

  • What is the current behavior?
    No animation

  • What is the expected behavior?
    Depending on the Animation type, a blending/moving/sliding toast message

  • What is the motivation / use case for changing the behavior?
    Better User Experience

  • Please tell us about your environment:

  • Angular version: 2.1.0
  • Browser: all

Thanks
Torsten

angular2 RC

This nice package unfortunately doesn't work with angular2 RC

beta7

was wondering when this was going to be set up for beta 7

How to disable timeout?

How to disable timeout?

As per your config comment, you have mentioned set to false to disable. But which property I need to set to false?

 // How long (in miliseconds) the toasty shows before it's removed. Set to false to disable.
timeout: number = 5000;

Also, Is there a toasty message feature with user confirmation... like YES and NO buttons?

Environment:
Angular2 version 2.0.0
ng2-toasty version 2.0.1

import {Toasty} from './src/toasty.container'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'

After installing ng2-toasty, a build gives me the following error:

/home/rtm/repos/triconinfotech/hitouch/node_modules/ng2-toasty/ng2-toasty.ts:7
import {Toasty} from './src/toasty.container';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

My tsconfig.json file is bare-bones, with neither files/filesGlob/excludes entries.

Do I need to do something with the gulpfile?
This is angular2 with ionic2 if that matters.

[2.2.0] Can't bind to 'ngClass' since it isn't a known property of 'div'

  • I'm submitting a ...
    [x ] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository

  • Do you want to request a feature or report a bug?
    A bug report with the 2.2.0 just updated. These errors didn't occur with the 2.1.0.

  • What is the current behavior?
    These errors are displayed: (not whole but part of the errors.)

Can't bind to 'ngClass' since it isn't a known property of 'div'. ("
        <div class="toast" [ERROR ->][ngClass]="[toast.type, toast.theme]">
            <div *ngIf="toast.showClose" class="close-button" "): ToastComponent@1:27
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
        <div class="toast" [ngClass]="[toast.type, toast.theme]">
            <div [ERROR ->]*ngIf="toast.showClose" class="close-button" (click)="close($event)"></div>
            <div *ngIf="t"): ToastComponent@2:17
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
        <div class="toast" [ngClass]="[toast.type, toast.theme]">
            [ERROR ->]<div *ngIf="toast.showClose" class="close-button" (click)="close($event)"></div>
            <div *ng"): ToastComponent@2:12

I believe taking out CommonModule from index.ts by this commit causes the errors.
7d7c0a8

  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

  • What is the expected behavior?
    No error should be displayed to console.

  • What is the motivation / use case for changing the behavior?

  • Please tell us about your environment:

Angular version: 2.4.1
Angular CLI: 1.0.0-beta.24
ng2-toasty: 2.2.0

  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Two instances of ToastyService when lazy loading routes and shared module

  • I'm submitting a ...
    [x] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?
    bug
  • What is the current behavior?
    When I create lazy loaded routes with a shared module, two instances of ToastyService is created and no toasts is shown. Only ToastService in lazy loaded module gets updated.
  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.
    Tried to do a Plunker but didn't find out how to include Toasty in this. Here is the code that differs from Angular Quickstart:

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SharedModule } from './shared.module';
import { routing } from './app.routing';
@NgModule({
  imports: [
    BrowserModule,
    SharedModule,
    routing
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<h1>My First Angular App</h1>
  <router-outlet></router-outlet>
  <ng2-toasty position="top-right"></ng2-toasty>`
})
export class AppComponent { 
}

app.routing

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StartComponent } from './start.component';
const appRoutes: Routes = [
    { path: '', redirectTo: 'start', pathMatch: 'full' },
    { path: 'start', loadChildren: 'app/start.module#StartModule' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

shared.module

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ToastyModule, ToastyService } from 'ng2-toasty';
@NgModule({
    imports: [
        CommonModule,
        ToastyModule.forRoot()
    ],
    declarations: [],
    exports: [
        CommonModule,
        FormsModule,
        ToastyModule
    ]
})
export class SharedModule {
}

start.module

import { NgModule } from '@angular/core';
import { StartComponent } from './start.component';
import { SharedModule } from './shared.module';
import { routing } from './start.routing';
@NgModule({
  imports: [
    SharedModule,
    routing
  ],
  declarations: [
      StartComponent
  ],
  exports: []
})
export class StartModule { }

start.component

import { Component } from '@angular/core';
import {ToastyService, ToastyConfig, ToastOptions, ToastData} from 'ng2-toasty';

@Component({
  moduleId: module.id,
  selector: 'my-start',
  template: `<button (click)="addToast()">Add Toast</button>`
})
export class StartComponent {
      constructor(private toastyService:ToastyService, private toastyConfig: ToastyConfig) { 
        // Assign the selected theme name to the `theme` property of the instance of ToastyConfig. 
        // Possible values: default, bootstrap, material
        this.toastyConfig.theme = 'material';
    }

        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);
    }
}

start.routing

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StartComponent } from './start.component';
const appRoutes: Routes = [
    { path: '', component: StartComponent }
];
export const routing: ModuleWithProviders = RouterModule.forChild(appRoutes);
  • What is the expected behavior?
    When using lazy loaded routes and shared module, ToasyService should still be a singleton.
  • Please tell us about your environment:
  • Angular version: 2.0.0
  • Browser: [all ]

Angular 2.0RC5 compatibility

Does is required some update to working with RC5? I've been tried more to ngModules ToastyService and ToastyConfig but it doesn't works.

"ngModule is null"
Error getTranstiveModule...

Cannot AOT Compile Toasy or DnD

  • I'm submitting a ...
    [x] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?
  • What is the current behavior?
    When i compile with Toasty or Dnd included I get an error:
D:\dev\Ahead-of-Time\QUICKSTART_AoT>"node_modules/.bin/ngc" -p tsconfig-aot.json
Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in D:/dev/Ahead-of-Time/QUICKSTART_AoT/app/app.module.ts, resolving symbol AppModule in D:/dev/Ahead-of-Time/QUICKSTART_AoT/app/app.module.ts
    at simplifyInContext (D:\dev\Ahead-of-Time\QUICKSTART_AoT\node_modules\@angular\compiler-cli\src\static_reflector.js:472:23)
    at StaticReflector.simplify (D:\dev\Ahead-of-Time\QUICKSTART_AoT\node_modules\@angular\compiler-cli\src\static_reflector.js:475:22)
    at StaticReflector.annotations (D:\dev\Ahead-of-Time\QUICKSTART_AoT\node_modules\@angular\compiler-cli\src\static_reflector.js:61:36)
    at _loop_1 (D:\dev\Ahead-of-Time\QUICKSTART_AoT\node_modules\@angular\compiler-cli\src\codegen.js:67:54)
    at CodeGeneratorModuleCollector.readFileMetadata (D:\dev\Ahead-of-Time\QUICKSTART_AoT\node_modules\@angular\compiler-cli\src\codegen.js:80:13)
    at D:\dev\Ahead-of-Time\QUICKSTART_AoT\node_modules\@angular\compiler-cli\src\codegen.js:42:74
    at Array.map (native)
    at CodeGeneratorModuleCollector.getModuleSymbols (D:\dev\Ahead-of-Time\QUICKSTART_AoT\node_modules\@angular\compiler-cli\src\codegen.js:42:35)
    at CodeGenerator.codegen (D:\dev\Ahead-of-Time\QUICKSTART_AoT\node_modules\@angular\compiler-cli\src\codegen.js:121:39)
    at codegen (D:\dev\Ahead-of-Time\QUICKSTART_AoT\node_modules\@angular\compiler-cli\src\main.js:7:81)
Compilation failed

app.module:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToastyModule } from 'ng2-toasty';

import { AppComponent }   from './app.component';

@NgModule({
  imports:
  [
    BrowserModule,
    ToastyModule.forRoot()
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
  • What is the expected behavior?
    No errors when compiling
  • What is the motivation / use case for changing the behavior?
  • Please tell us about your environment:
  • Angular version: 2.1.0
  • Browser: [all ]
  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Remove Warnings

As requeriment in Beta 17....

Template parse warnings:
"#" inside of expressions is deprecated. Use "let" instead! ("
    <div id="toasty" [ngClass]="[position]">
        <ng2-toast [ERROR ->]*ngFor="#toast of toasts" [toast]="toast" (closeToast)="closeToast(toast)"></ng2-toast>
    </div>"): Toasty@2:19```

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.