The default position for notifications from ngx-toaster is incorrect on the screen

Encountering an issue - the notification seems to be displaying by default at the top, possibly due to CSS properties affecting it?

When I set the position in the module import like so:

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

However, after this change, the notification appears in the top-left corner without any message. Despite providing a message for when a user logs in incorrectly, only a blank red (error) toastr notification is displayed as shown in the screenshot.

Link to my AppModule: https://i.sstatic.net/l1W2t.png

Below 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);
      });
  }

Currently using Angular 10.

Answer №1

It may seem trivial, but the reason for the error was simply a typo in my configuration code:

positionClass: "toastr-bottom-right"

I had mistakenly written "toast-bottom-right" instead of "toastr-bottom-right"

positionClass: "toastr-bottom-right"

Answer №2

Make sure to double check the spelling of "bottom" in this section.

ToastrModule.forRoot({
    timeOut: 10000,
    positionClass: 'toast-bottom-right',
  }),

You have the option to disregard the timeOut parameter here.

Answer №3

If you're looking for an alternative, why not explore a different provider and create a custom toast notification snippet directly on their platform? Try it out in this interactive playground:

Designed for Angular 10+

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain the index of the selected item from a dropdown menu

Is there a way for the selectedIndex to return -1 if no item is selected, instead of the element's text at position 0? It seems that the selectedIndex always returns 0 even when nothing is selected. <select id="abc" name="abc"> <option& ...

What is the best way to modify the color of the btn-primary (label) for an unchecked radio button

Objective: I am aiming to change the background color to #FFFFFF when the radio button is not checked and to #9381FF when it is checked. Current Result: Currently, both buttons display a background color of #9381FF. I am aware that using !important is no ...

Can Antd's Typography.Paragraph be used as a multi-row Menu title?

I am having trouble getting multiple rows to work inside the Antd Submenu. When I select only one row, it works fine. However, when I try to select multiple rows, the ellipsis is not shown at all and the text remains in one row. <SubMenu ...

Utilizing Vue and Prismic rich text: incorporating an event listener onto a span element

In my Vue app, I am retrieving content from Prismic using an API CMS. Within this content, there are certain sections enclosed in span tags with a unique class. My goal is to target those specific span nodes in Vue and apply an event listener to them. Whe ...

Send Components to another component without specific TypeScript typespecified

Struggling with a situation where I am faced with the challenge of working around strongly typed variables. The issue arises with a set of icons as components and an icon wrapper component. The wrapper component requires a themeMode variable to determine ...

Strategies for sending special characters from Python to ng-init in AngularJS

Currently, I am utilizing ng-init to set initial values on my page, but I am encountering difficulties when the values contain special characters. My current approach involves passing values from Python to Angular using the following syntax: <span ng- ...

Issues with non-functional plugins that utilize AJAX functionality

I am encountering an issue with my code that includes an ajax script for deleting a record, along with an animation during the deletion process. However, when I try to integrate the ajax script with plugins for confirmation, it seems to not be working prop ...

What is the process for executing JavaScript code that is stored as a string?

After making an AJAX call, I receive a random string (constructed dynamically on the server) that contains JavaScript code like: Plugins.add('test', function() { return { html: '<div>test</div&g ...

How can I show the most recent x floating point values on a chart using ChartJS?

I'm currently working on a Vertical Bar Chart using react-chartjs-2. I have an array of numerous float numbers saved. My attempt to utilize the chartjs callback option to only show the last value on the graph failed. The problem lies in the fact th ...

What is the method for establishing an interval, removing it, and then reinstating the interval with the identical ID?

I'm wanting something along these lines: Inter = setInterval(Function, 1000); clearInerval(Inter); Inter = setInterval(Function, 1000); I've tried something similar without success. It's hard to explain all the details in a tidy way. Can a ...

Can you provide instructions on accessing the profile of a user by clicking on their name?

I created this blog and I want to be able to redirect the website to a specific user's profile when clicking on their profile from any post. Currently, I can only retrieve the profile picture of the currently logged-in user. What steps should I take t ...

Retrieve information from a MongoDB database and present it on a webpage using Handlebars (hbs) or HTML files in

I recently delved into learning node.js and decided to build a "Todo-App". Currently, I am faced with the challenge of transferring data from my mongodb database into my hbs files for display. My understanding is that data moves from server.js (server) t ...

I need assistance with retrieving the value in a password field using JavaScript. I've been stuck on this issue all morning and would greatly appreciate any

Currently utilizing document.getElementById("password").value for retrieving the input value of the password field. Seeking assistance! Additionally, the form contains an action="authenticate_signup.php" Encountering an issue where the password field va ...

Achieving a shuffling CSS animation in Angular 8 may require some adjustments compared to Angular 2. Here's how you can make it

Seeking assistance with animating an app-transition-group component in Angular 8. My CSS includes: .flip-list-move { transition: transform 1s; } Despite calling the shuffle function, the animation always happens instantly and fails to animate properly ...

Store the label's value as a JSON object in JavaScript

I've encountered a recurring question with no satisfactory answers. Can someone please clarify things for me? Let's take a look at a JSON file: { 'soapenv:Envelope': { '$': { 'xmlns:soapenv': 'http:// ...

Break free from Instagram's in-app browser and open in Safari instead

One of the features on my website is a link that redirects users to Instagram login to access photos. Unfortunately, when using the in-app browser on an iOS device, this page does not function properly. I am considering adding a link that will redirect use ...

Error: Trying to access 'product-1' property on an undefined object

Having trouble displaying JSON data in my React.js project, I've been stuck on an error for the past couple of days with no luck in solving it. The JSON data is stored in a file named products.json: { "product-1": [ { ...

Mouse movement event does not correspond to identical coordinates

I'm working on a 3D animation and trying to detect collisions with the mouse. I've attempted to make a ball follow the mouse, but it's not aligning correctly. Here's a working example in CodePen This function is borrowed from another ...

Learn how to simultaneously play two audio files using the same identifier in JavaScript

I'm facing an issue with two audio files that have a progress bar and both have the same ID: <audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio> </p> ...

The jQuery $() constructor and using strings with a forward slash at the beginning

Could you please review this code snippet: http://jsfiddle.net/Bkdgr/1/ The code seems to be malfunctioning. However, implementing one of the two modifications below resolves the issue: Using the pure newItem string in append, rather than enclosing ...