Question

23

How can I change the position of a specific toast per use case using ngx-toastr in Angular 5

rated 0 times [ 24] [ 1] / answers: 1 / hits: 23257 / 6 Years ago, mon, march 19, 2018, 12:00:00

I have been reading up on this on the actual site for ngx-toastr ngx-toastr, and other posts on Stack Overflow, but cannot find a clear solution for my work case.

I am trying to change the position of the toastr for specific use cases. Example; when it is an error, show the toastr on the top.

I have a very vanilla setup.

In my app.module.ts I have the following:

import { ToastrModule } from 'ngx-toastr';

In my imports of app.module.ts I have:

imports: [

    BrowserModule,

    ToastrModule.forRoot({

      timeOut: 3500,

      positionClass: 'toast-bottom-center',

      preventDuplicates: true,

}),

In my components I declare the toastr in my constructor:

constructor(private toastr: ToastrService) {}

And I use the toastr as follows:

this.toastr.error('There was an error loading the Asset List!', 'Asset Register');

As per my setup, all toast show in 'toast-bottom-center'. How can I modify this call to show the toast on the top?

this.toastr.error('There was an error loading the Asset List!', 'Asset Register');

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zane

Add To Favorites

Follow

Total Points: 471

Total Questions: 94

Total Answers: 91

Location: Bahrain

Member since Sun, Mar 27, 2022

2 Years ago

answered 6 Years ago bryonk · Accepted Answer

Make a service for that.

Start by creating an enum

export enum ToasterPosition {

  topRight = 'toast-top-right',

  topLeft = 'toast-top-left',

  bottomRight = 'toast-bottom-right',

  bottomLeft= 'toast-bottom-left',

  // Other positions you would like

}

Now create your service

export class ToasterService {

  constructor(private toastr: ToastrService) {}



  public error(title: string, message: string, positionClass: ToasterPosition) {

    this.toastr.error(message, title, { positionClass });

  }

}

This way, you can't miss the positioning, since you have to provide an enum.