JSPM – ng-angular-popup@0.1.8

Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng-angular-popup) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

This library was generated with Angular CLI version 13.1.0.

Code Implementation : https://medium.com/@yshashi30/how-to-use-toast-messages-ng-angular-popup-in-angular-project-70d4160400de

Features

Easy to integrate
Supports success, error, info and warning toaster messages
Add details, summary as per the message usage
supports duration, sticky

Install

npm i ng-angular-popup

Setup

Add NgToasterModule to App NgModule
Add Font-Awesome CDN link in index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AngularBlog</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> //This to be added
</head>

<body class="mat-typography">
    <app-root></app-root>
</body>

</html>

import NgToastModule in app.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './component/header/header.component';
import { NgToastModule } from 'ng-angular-popup' <---- to be added

@NgModule({
  declarations: [
    HeaderComponent,

  ],
  imports: [
    NgToastModule <---- to be added
  ],

})
export class AppModule { }

use the selector in app.component.html file

Use

import { Component } from '@angular/core';
import { NgToastService } from 'ng-angular-popup';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(
    private toast: NgToastService <---to be injected
  ) { }

  ngOnInit(): void {
  }

  showSuccess() {
    this.toast.success({detail:"SUCCESS",summary:'Your Success Message',duration:'5000'});
  }
  
  showError() {
    this.toast.error({detail:"ERROR",summary:'Your Error Message',sticky:true});
  }

  showInfo() {
    this.toast.info({detail:"INFO",summary:'Your Info Message',sticky:true});
  }

  showWarn() {
    this.toast.warn({detail:"WARN",summary:'Your Warn Message',duration:'5000'});
  }

}

Upcoming features

Custom position for toaster
Custom animation for toaster

FAQ

Check out article on ng-angular-popup Integration with Angular 13

License

MIT

GitHub @SashikumarYadav · LinkedIn @SashikumarYadav · Medium @SashikumarYadav