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

Question

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');

Answer 1

The 3rd parameter of the error method is used to provide the position of the toastr message (among other things).

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

this.toastrService.warning('Some warning message', 'some title', {
   positionClass: 'toast-bottom-right' 
});

I hope it helps.