Git Product home page Git Product logo

Comments (9)

dessalines avatar dessalines commented on July 17, 2024 1

Never mind, figured out this one was because I was trying to do it on ngOnInit, instead of ngAfterViewInit.

from angular2-toaster.

avatar commented on July 17, 2024

I'm getting the same error reported in the console when I try to use pop(message: string), but I can't see anything in the docs telling me I need to initialize the container, or how I might do such a thing, or when.

tchoulihan is doing something in the ngAfterViewInit event, but what?

from angular2-toaster.

Stabzs avatar Stabzs commented on July 17, 2024

@BrianLowe can you please provide a bit more context on what you are doing and how your code is structured? Most likely you are calling pop from the constructor, before the container is rendered to the DOM.

from angular2-toaster.

avatar commented on July 17, 2024

@Stabz - thanks for a rapid response!

I'm just beginning with Angular2 (no experience of Angular 1) so my app is quite simple so far. I have a component with a clickable button wired to a handler that just raises an alert in the browser. Obviously that's not going to be testable so I need to replace it with a toaster.

So far I've added the import { ... } from ... line at the head of my component, and added providers: [ToasterService], directives: [ToasterContainerComponent] in the @component decorator, and added private _toasterService: ToasterService as a constructor argument.

My layout includes <body> <toaster-container></toaster-container>

Now, in my button's click handler I replaced alert("todo - act on this click"); with this._toasterService.pop("todo - act on this click"); and as soon as I click the button I get this error in the browser tools console.

I can't see anything in the sources or in the test specs that might show me where I would initialize the toaster, so I don't know what I've missed.

from angular2-toaster.

avatar commented on July 17, 2024

Hmmm, my layout has the component's markup as a child of the body element, but in the examples the component's tag is always given inline with the calling element's template. Maybe the initialization I'm looking for is automatic when the toaster component is found and parsed within my view...

I've tried moving my <toaster-container> tag to include it as part of the markup loaded by my component, but that raises a different error: Template parse errors:
Can't bind to 'ngSwitchCase' since it isn't a known native property

from angular2-toaster.

Stabzs avatar Stabzs commented on July 17, 2024

@BrianLowe It is difficult to pin down the exact cause of the issues you are having without a plunker, so if you continue to have difficulties, please create one and I'd be happy to walk through it. That said, here are a few observations:

  • The pop call is incorrect and will cause issues. The first argument for pop() is the toast type, not a title or body. As a result, if it tries to map the string you've passed as a type, it'll certainly cause issues. Perhaps better error handling can be added around this.
  • Your setup of the actual container seems very reasonable and your inclusion of both the service and the container component looks perfect. However, as you noted in your subsequent comment, the component markup IS inline with the calling element template. This is for bootstrapping purposes in your Angular 2 app. Angular 2 is a bit different in how it initializes and you need to make certain that the app is initialized before rendering subsequent components.
  • Now, this brings us to the next point...it looks like by moving your <toaster-container> inclusion to your template, you are now properly bootstrapping the library, which is great! However, it looks like you have a mismatch in version. Since angular2-toaster 0.3.5-rc.2, Angular 2.0.0-rc.2 or higher has been required due to changes in Angular 2's switch/case syntax. As a result, please make sure you are using a current version of angular 2 (I recommend rc 3 or 4) or use a more deprecated version of angular2-toaster, which I don't recommend since I've made additional bug fixes in the last few versions.

If that doesn't help you get going, please feel free to create a plunker and I'll be more than happy to take a look and help you get it up and running.

from angular2-toaster.

avatar commented on July 17, 2024

@Stabzs Thanks for this. I've reworked my code a little so I now have the latest angular (rc4) and dependencies, and by passing the correct arguments in to the pop() method I can get a toast to appear in my page.

Now my problem is with the configuration.

When I include [toasterConfig]="toasterConfig" in my tag errors are thrown in ng_class.ts line 111 where it tries to trim a className but className is undefined. If I leave out the config and rely on the defaults, this line is hit several times with various class names, or empty strings, but never with undefined. If I use an empty toasterConfig, or one with all of its members populated I hit the same undefined className problem.

I've tried to set up a plunker to illustrate the problem, but that seems like another learning curve to struggle with right now. I get nowhere.

I don't expect you to spend lots of time on this, but thanks for your help so far.

One other thing though... I wonder why pop's first argument accepts an argument of type string | Toast when there are only 5 usable string values. You could check the passed value at the start to make sure it's valid, but maybe it would be better to rely on TypeScript's typing by creating a ToastType enum as info | wait | error | success | warning and requiring the first argument to be ToastType | Toast.

from angular2-toaster.

avatar commented on July 17, 2024

So, if I create a config object with
this.toasterConfig = { positionClass: "toast-top-full-width" }
then TypeScript is happy because the object meets the ToasterConfig interface definition, but deep into the generated ToasterContainerComponent.template.js code it finds an array
["toast-top-full-width", undefined]
and passes each member to ng_class_toggleClass, which crashes out trying to apply .trim to the undefined className.

If I create a config object with
var cfg = new ToasterConfig(); cfg.positionClass = "toast-top-full-width"; this.toasterConfig = cfg;
then the array found in the generated code is
["toast-top-full-width", ""]
and the ng_class._toggleClass code is OK with the empty string passed.

I now have a working setup. Yayy!

from angular2-toaster.

Stabzs avatar Stabzs commented on July 17, 2024

@BrianLowe Congrats on getting a working setup!

Yes, it would be possible to use a ToastType enum. The only issue there is that then consumers must import yet another enum just to pop simple toasts. I'm not certain that the added clarity is worth that additional pain although it's worth considering.

As for the ToasterConfig issue, there are a few reasons why it may or may not have worked.

Where you place the initialization for an object when not using the ToasterConfig constructor seems to matter quite a bit to the TypeScript transpiler. For instance, it seems that you tried to create the object instance as a class level object, which failed. However, if you create it within a function as a locally scoped variable and then assign it to a class level, it will satisfy the compiler AND the transpiler.

However, this is misleading. There is logic in the ToasterConfig constructor that defaults values correctly when an instance is created. In addition, if the object is initialized in the constructor, it will be assigned to the container instance AFTER the container is already initialized because of how the angular 2 lifecycle works and how the binding is performed. This will result in the config overrides not getting propagated to your container instance.

What's the conclusion to all of this?

The only correct way to initialize a ToasterConfig object is with the second form of syntax that you described, as a class-level variable:

export class YourComponent {
    public toasterconfig = new ToasterConfig({ positionClass = "toast-top-full-width" });

    constructor()...
}

Hopefully that helps clear things up! Enjoy the library!

from angular2-toaster.

Related Issues (20)

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.