Ngx-toastr: v9

[scttcper]

Still planning out a next version. More drastic changes than before. Likely to happen after the release of angular v6

support

• angular v6
• rxjs v6

changes

• no default toast (toast component must be supplied to module.forRoot(). removes dependency on animations
• Add project dependency @angular/cdk and use their portal and overlay
  
  
  
  • what is impact on bundle size?
  
  
  • would it be possible to prepend toasts (newestOnTop) currently it only has append
  
  
  • whats left after this is gone?
  
  
• confirmation support
• fix timing issue #342

[yarrgh]

Should also consider using @angular/cli 6.0.0 as it now supports libraries. Also relying on @angular/cdk shouldn't impact the library bundle size. It should be a peerDependency and not included with the library and should decrease the overall size. Unless you mean bundle size of individual apps.

I have an early working attempt with new cli and using the cdk: https://github.com/yarrgh/ngx-toastr/tree/cdk-cli6

I have a stackblitz but something is weird with toasts. They haven't been showing up correctly until I toggle the bootstrap 4 setting. https://stackblitz.com/github/qgnivbry

And yes I know, the imports are incorrectly referencing the library (should be @ngx-toastr/core). Since the dist directory isn't being committed to the repository, StackBlitz doesn't know where to find the package otherwise.

[scttcper]

Cool, I'll check out the demo.

I've put us onto angular 6 with rxjs 6 now. I tried out the library support with an earlier build of angular-cli library support and it didn't seem to do much other than call ng-packagr for you? I guess coverage reporting for only the library or something? Still didn't support typescript paths or sub packages as far as I could tell.

Have you read anything about that root injectable?
https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/

@Injectable({
  providedIn: 'root'
})
export class UserService {

}

https://angular.io/api/core/Injectable#injectable

[yarrgh]

Not sure what happened with the stackblitz url. This should work though: https://stackblitz.com/github/yarrgh/ngx-toastr/tree/cdk-cli6

There isn't a whole lot different that using the new cli would do. It calls ng-packagr to do the actual builds and makes testing a bit easier, set some best practices of targeting the library from the app code, etc.

The providedIn: 'root' just tells the DI which injector to use for the service. In this case, the root injector. It's the same as adding it to the module providers array. The only benefit is that providedIn allows for treeshaking services that aren't used, which doesn't make much sense for this library since ToastrService will always be used in any apps that import it. One nice thing about it is that you don't have to add services that use providedIn: 'root' is that you don't have to remember to add it to a module. Either way, I made use of the providedIn property in my fork that I linked earlier if you want to take a look at it.

[yarrgh]

Also wanted your opinion on:
https://github.com/yarrgh/ngx-toastr/blob/f7003fbf3259fea023a79dca85328b3233b4a52f/projects/ngx-toastr/core/src/lib/toast-token.ts#L10-L13

This uses the providedIn: root and the factory properties to automatically create the default config. I then made the TOAST_CONFIG token optional in the ToastrService:

https://github.com/yarrgh/ngx-toastr/blob/f7003fbf3259fea023a79dca85328b3233b4a52f/projects/ngx-toastr/core/src/lib/toastr.service.ts#L48-L51

My idea is that we could potentially make forRoot() optional if you only want the default settings.

[scttcper]

optional config works for me.

Not sure how to get cdk to do newestOnTop option. I was thinking could change the css to use flexbox and reverse the order, but that seems hacky. I guess we could access the elements and change the order...

i do want to drop all that code and use cdk it looks like it works well

[yarrgh]

It made sense at the time. It was bundled with the Material library and it didn't make sense to bring in the Material library.

Flexbox might be the simplest/cleanest way of doing it. I'm not sure how easy it would be to access the elements and reverse them with the cdk. Worth investigating if you have any ideas.

One thing I did notice with using the cdk, at least with the way I've implemented it, in the demo, if you switch from a normal toast to a notyf toast while other toasts are visible, it pulls all of the toasts down to the bottom right with the notyf toast. Not sure if that's a huge deal or not. Maybe there's a better way than the way I am doing it.

[scttcper]

I know what does that as well and was something i made work in my "fork" of the cdk code. I don't think it matters unless people are displaying toasts in random corners at the same time.

[jessycormier]

Angular 7.x is now out, how goes the progress for updating :)

[scttcper]

will revisit CDK in the future. currently still not supporting the positioning of html elements we would need.