add toaster in angular

Adding a toaster in Angular is easy and can be done in a few steps. First, install the angular-toastr library using npm or yarn, depending on your preference. To install with npm, run the following command in your terminal:

npm install angular-toastr --save

To install with yarn, run the following command in your terminal:

yarn add angular-toastr

Next, you need to add the library to the list of modules in your app.module.ts file. You can do this by adding the following line to the NgModule section of the file:

import { ToastrModule } from 'angular-toastr';

Then, add the ToastrModule to the imports array of the @NgModule like this:

imports:[
  ToastrModule.forRoot(),
]

Now that the library is installed and imported, you can use the toaster service in your components. To use the service, first you need to inject it into your component class. Then you can call the toastr methods to show different messages. Here is an example of how you could use the service to show a success message:

import { ToastrService } from 'angular-toastr';

export class AppComponent {
  constructor(public toastr: ToastrService) {}
  
  showSuccess() {
    this.toastr.success('This is a success message', 'Success!');
  }
}

Now you can call the showSuccess() method in your component to show the success message. You can check the library documentation for more information about all the available methods and options. That's it - you now have a toaster in your Angular application.

Subscribe to The Poor Coder | Algorithm Solutions

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe