ng2-toastr not applying proper css when invoked in Angular 4.3.6 service

Question

I am trying to implement ng2-toastr in my application. I am on "@angular/compilercli": "^4.3.6",. I have the following Interceptor to intercept errors form the Http.

 export class InterceptorService implements HttpInterceptor {
  constructor(public toastr:ToastsManager) {
  }
  intercept(req:HttpRequest<any>,
            next:HttpHandler):Observable<HttpEvent<any>> {
    //Inspection removed for this file for rxjs.
    //noinspection TypeScriptValidateTypes
    return next.handle(req).do(evt => {
      if (evt instanceof HttpResponse) {
        this.toastr.success('You are awesome!', 'Success!');
        console.log('---> status:', evt.status);
        // console.log('---> filter:', req.params.get('filter'));
      }
    }, err => {
      if (err instanceof HttpErrorResponse) {
        this.toastr.error('This is not good!', 'Oops!');
        //toastr here
      }
      console.log(err);
    });

  }
}

And in my component I am setting my RootViewContainerRef after imporinting ToastModule.forRoot() in my @NgModule declaration.

constructor( public toastr: ToastsManager, vRef: ViewContainerRef) {
  this.toastr.setRootViewContainerRef(vRef);
}

For some reason it compiles fine and I also see the log from console.log('---> status:', evt.status); line of the services in console but don't see any toastr displayed. I however can see the toast container when I inspect the component in browser. I don't know what I am missing here. Any guide will be appreciated. What is wrong with my implementation?

score 0 · Answer 1 · answered Aug 28 '17 at 17:50

0

Hi your InterceptorService itself add this onedeclaration,no need to add component

constructor( public toastr: ToastsManager, vRef: ViewContainerRef) {
        this.toastr.setRootViewContainerRef(vRef);
}

dont forgot do this one ToastModule.forRoot() in my @NgModule it must be working

answered Aug 28 '17 at 17:50

Robert

3,373
1
18
34

You cannot add `ViewContainerRef` to Services as Services are singleton in Nature.https://stackoverflow.com/questions/40636840/how-can-i-inject-viewcontainerref-into-a-service – Dinesh Devkota Aug 28 '17 at 21:30

score 0 · Answer 2 · answered Aug 29 '17 at 08:33

0

I however can see the toast container when I inspect the component in browser.

Does that toaster container has style="display: none;" ? Because from angular 4.3.5 to 4.3.6 something was changed with animations, I also face some problem with animations, the component is rendered and should fade in, but it is set to display: none.

If you will see display: none, that means something wrong with animations.

answered Aug 29 '17 at 08:33

Null

518
7
13

Not really. I see the commonent without any style applied to it. – Dinesh Devkota Aug 29 '17 at 21:12

score 0 · Accepted Answer · answered Sep 18 '17 at 07:23

0

Angular was updated to 4.1.1 and seems some issues with animations are fixed. Lets try to update to 4.1.1 and see if you still have a problems.

answered Sep 18 '17 at 07:23

Null

518
7
13

score 0 · Answer 4 · answered Oct 30 '17 at 03:41

0

I had the same problem in Angular 4.2

Try to add the below. it should work..

@import '../node_modules/ng2-toastr/ng2-toastr.css'; to ./src/app/theme/theme.cscc

answered Oct 30 '17 at 03:41

Prabakar Veer

1

ng2-toastr not applying proper css when invoked in Angular 4.3.6 service

4 Answers4