How to adjust the width of the toastr message in Angular

Question

I have toastr message notification using ngx-toastr from npm (my current stack is Angular 9)

Is there a way to alter the max-width for the messages since it is causing the message-text to wrap.

this.toastrService.error(
          'This is an error message to be displayed<br> please log back','',
          { enableHtml: true }
        ).

I want the displayed also to be in the first line

Answer 1

You could use the native classes, i.E. toast-top-full-width or toast-bottom-full-width

 <toaster-container toaster-options="{
   'time-out': 2500, 
   'close-button':false, 
   'position-class':'toast-bottom-full-width'
  }"></toaster-container>

As an alternative you could also apply your custom class via position-class and define the class in your CSS.

 <toaster-container toaster-options="{
    'time-out': 2500, 
    'close-button':false, 
    'position-class':'my-own-toastr-class'
  }"></toaster-container>

CSS:

.my-own-toastr-class {
   width: 100%;
}

Update after clarifications from the comments:

From the docs:

Setting Individual Options

success, error, info, warning take (message, title, ToastConfig) pass an options object to replace any default option.

Example:

this.toastrService.error('everything is broken', 'Major Error', {
  timeOut: 3000,
});

So in your case for example that would be :

this.toastrService.error(
          'This is an error message to be displayed<br> please log back','',
          { enableHtml: true,
            position-class:'toast-bottom-full-width' 
          }
        ).

Or with your own custom class:

this.toastrService.error(
          'This is an error message to be displayed<br> please log back','',
          { enableHtml: true,
            position-class:'my-own-toastr-class' 
          }
        ).

Please see more info under OPTIONS at https://www.npmjs.com/package/ngx-toastr.