How to show success or error messages in angular using ngx toastr



This post will explain you how to show success or error messages in angular using ngx-toastr.

when you are working with crud operations in angular you may have the requirement of showing status messages, showing the status message in earlier days is done using bootstrap model popup. But now a day in angular you can achieve that using a package called 'ngx-toastr'.

Ngx-toastr: is a powerful and open source package, using which you can show status messages with different styles and animations effects,

You can choose lot of customization options for this package like to show message at top, right, bottom and left.

Here are the steps to install the package

Running Demo: https://scttcper.github.io/ngx-toastr/

Step 1:

npm install ngx-toastr --save

Step 2:

npm install @angular/animations --save

Step 3:

Add following css in angular.json/angular-cli.json

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

Step 4:

Import ToastrModule and BrowserAnimationsModule to NgModule in 'app.module.ts'

'app.module.ts'

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
	CommonModule,
	BrowserAnimationsModule, // required animations module
	ToastrModule.forRoot() // ToastrModule added
 ],
  bootstrap: [App],
  declarations: [App]
})
class AppModule {}

Step 5:

Finally, in your component.ts (where you want to show this status message) write the following code.

import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
	
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {

                     constructor (private toastr: ToastrService) {}

                    showSuccess() {

                                this.toastr.success('Hello world!', 'This is success message');

                      }

                  }

Labels: show status messages in angular 6, angular 4 status message display , angular 5 success message
Subscribe

Receive Quality Tutorials Straight in your Inbox by submitting your Email below:

Delivered by FeedBurner

Protected by Copyscape Duplicate Content Checker