CODEWITHSUNDEEP
angulartoastr
vennapusa
vennapusa

Reputation: 219

ng2-toastr not working in angular 4 application

ng2-toastr message is working fine when it is inside:

data => {
        this.toastr.info('OOPS!!!', 'Information!');
        this.dictData = data;
        console.log(this.dictData);
        this.results = data.results;
        console.log(this.results);

      } ,

But not working when it is inside:

   error => {
            console.log("some error occured");
            console.log(error.errorMessage);
            this.toastr.error('OOPS!!!', 'Error!');
            if (error.status === 404) {
              this.router.navigate(['/errornotfound']);
            }
}

Not able to understand why it is behaving this way.

Any kind of help is highly appreciated.

Upvotes: 0

Views: 342

Answers (1)

Rukshan Dangalla
Rukshan Dangalla

Reputation: 2590

This is what happening. When there is an error you immediately redirect to error page from the fullpageview. But your toast configured in FullpageviewComponent. So it's actually showing the error message. But you already navigated to error page and because of that you can't see the toast.

You can check that theory by commenting out the error redirection like below:

error => {
        console.log("some error occured");
        console.log(error.errorMessage);
        this.toastr.info('OOPS!!!', 'Information!');
        // if (error.status === 400) {
        //   this.router.navigate(['/errorbadrequest']);
        // }
        // if (error.status === 404) {
        //   this.router.navigate(['/errornotfound']);
        // }
        // if (error.status === 403) {
        //   this.router.navigate(['/errorauthenticationfailed']);
        // }
        // if (error.status === 414) {
        //   this.router.navigate(['/errorurltoolong']);
        // }
      }

Solution 01:

You can show the toast in the error page instead of FullpageviewComponent

Solution 02:

Show error toast in the FullpageviewComponent and then navigate to error page. For this you need to use onToastClose kind of event.

Solution 03:

Another solution is to create separate service to show toast messages. Configure the toast in root level of your app. In this way you don't have to add the toast in every components.

Hope this helps :)

Upvotes: 1

Related Questions