ng-angular-popup

Toast library

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ng-angular-popup
0.2.07 months agoa year agoMinified + gzip package size for ng-angular-popup in KB

Popular Searches

Readme

ng-angular-popup
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