ngx-toaster is notifying in the wrong place of the screen by default

Question

This is the problem it's presenting the notification by default up above, maybe it's getting affected by CSS properties ??

when I configure the place in the import of the module like this :

imports: [
  ...
  ...,
  ToastrModule.forRoot(
   positionClass: 'toastr-bottom-right'
  )
]

well when I did this, it puts the notification in the up-left corner, in addition to that is not showing any message as you can see in the screenshot it's only a red (error) toastr notification but empty, even though I did pass it a message to notify when a user is not login correctly.

Here is my AppModule:

here is my component code

export class NavComponent  {

  ...
  ...
  ...
  model: any = {};
  loggedIn: boolean;

  constructor(
    private accountService: AccountService, 
    private router: Router,
    private toastr: ToastrService
    ) { }
  ...
  ...
  login(){
      this.accountService.login(this.model).subscribe(response => {
        this.router.navigateByUrl('/agents');
      }, errorResponse => {
        console.log(errorResponse);
        this.toastr.error(errorResponse.eror);
      });
  }

I'm using Angular 10.

Answer 1

Ok this is silly, but the answer is I was misspelling the configuration I put:

positionClass: "toastr-bottom-right"

but it was "toast-bottom-right" without the "r"

positionClass: "toast-bottom-right"