How to add toastr module to Angular project
Tags: angular, typescript, programming
Published: 2021-11-14 13:59:54

---
title: How to add toastr module to Angular project
published: true
description: How to add toastr module to Angular project
tags: angular,typescript,programming
cover_image: https://mightytechno.com/wp-content/uploads/2021/10/agular-1024x576.png
canonical_url: https://mightytechno.com/how-to-add-toastr-in-angular/
---

In any web application showing the alert or message to indicate the different status is required functionality to have which help to understand the users what is happening under the hood.

##Install ngx-toastr plugin
First, open the terminal and run the following command inside your project to install the ngx-toastr plugin

```javascript
npm install ngx-toastr --save
```

Next, you need to install animation package which is required to toastr plugin.

```javascript
npm install @angular/animations --save
```
##Applying toastr styling
Next open angular.json and add the following style which is required for toastr.

```json
"styles": [
       "src/styles.scss",
       "node_modules/ngx-toastr/toastr.css"
  ],
```

##Import toasrt module
Next open app.module.js file and import BrowserAnimationsModule and ToastrModule.

```typescript
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
```
##How to show toastr
First, you should apply ToastrService to the component where you want to show the toastr. Also need to initiate through the constructer method. Then you can use different methods like success, warning, error based on your requirement.

```typescript
import { ToastrService } from 'ngx-toastr';

export class LandingComponent implements OnInit {

 
  constructor(private toastr:ToastrService) { }

  ngOnInit(): void {
  }

  showToastr(){
    this.toastr.success('This is the success toastr')
  }

}
```

<img alt="Angular toast" src="https://mightytechno.com/wp-content/uploads/2021/10/Screenshot-2021-10-16-at-19.50.05-1.png" data-canonical-src="https://mightytechno.com/wp-content/uploads/2021/10/Screenshot-2021-10-16-at-19.50.05-1.png" width="300" />

##Add a title to toastr

The first parameter of the method success accept the message and you can pass the title for the second parameter.

```typescript
showToastr(){
    this.toastr.success('This is the success toastr',"Success")
  }
```

<img alt="Angular toast" src="https://mightytechno.com/wp-content/uploads/2021/10/Screenshot-2021-10-16-at-19.51.49-1-2.png" data-canonical-src="https://mightytechno.com/wp-content/uploads/2021/10/Screenshot-2021-10-16-at-19.51.49-1-2.png" width="300" />

##Change the toastr position
By default, toastr will appear in the right top corner. This can be changed by setting positionClass when importing the module.

```typescript
ToastrModule.forRoot({
			positionClass: 'toast-top-center'
})
```

##Disable multiple/ duplicate toastr
If you click the button multiple times you can see a lot of toastrs appear on the screen. To prevent that you can disable the duplicates.

```typescript
ToastrModule.forRoot({
			preventDuplicates: true
})
```

##Show close button in the toastr

```typescript
ToastrModule.forRoot({
        closeButton:true
    })
```

##Change the toastr dismiss time out
Default toastr will disappear after 5 seconds. This can be changed by setting timeOut property. This accepts a value as milliseconds and makes sure to convert seconds to milliseconds before adding.

```typescript
ToastrModule.forRoot({
        timeOut:2000
})
```

##Restrict no of toastrs that can be appeared at a time
If you want to show multiple toastrs and need to control the maximum numbers, maxOpened property will allow to do that.
```typescript
ToastrModule.forRoot({
        maxOpened:2
})
```

##Setting up toastr level configurations

Previously we show the way of adding different config root levels which will affect all toastrs. But you can add those in toastr level if you required different configs for different places in the app.

```typescript
showToastr(){
    this.toastr.success('This is the success toastr',"Success")
    this.toastr.error('This is the error toastr',"Error",{
      timeOut:10000,
      closeButton:true
    })
  }
```

<img alt="Angular toast" src="https://mightytechno.com/wp-content/uploads/2021/10/Screenshot-2021-10-16-at-19.57.09-1.png" data-canonical-src="https://mightytechno.com/wp-content/uploads/2021/10/Screenshot-2021-10-16-at-19.57.09-1.png" width="300" />


Connect with me - [Instagram](https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Youtube](https://www.youtube.com/channel/UCwxiHP2Ryd-aR0SWKjYguxw)