Angular Toast Notification

This library was generated with Angular CLI version 13.1.0.

Code Implementation

Here is the medium link for the steps to implement (https://medium.com/@yshashi30/how-to-use-toast-messages-ng-angular-popup-in-angular-project-70d4160400de)

Install

npm install ng-angular-popup --force (force is optional)

Adding Font-Aweosme dependency

Add font-awesome cdn link in index.html file

Importing NgToastModule in AppModule

import { CommonModule } from '@angular/common'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserModule } from '@angular/platform-browser'; import {NgToastModule} from ‘ng-angular-popup’;

@NgModule({ imports: [ CommonModule, BrowserAnimationsModule, // required animations module NgToastModule, BrowserModule ], bootstrap: [App], declarations: [App], }) class AppModule {}

Adding Selector in app.component.ts

Use

import { NgToastService } from 'ngx-toastr';

@Component({...}) export class YourComponent { constructor(private toast : NgToastService) {}

showSuccess() { this.toast.success({detail:'Success Message',summary:'This is success summary',duration:5000}); } }

Options

There are details, summary and duration(ms) features currently You can use cancel button to hide the toast or you can auto hide using the duration.