0.5.2 • Published 6 months ago

ng-angular-popup v0.5.2

Weekly downloads
-
License
-
Repository
-
Last release
6 months ago

ng-angular-popup

This library was generated with Angular CLI version 16.1.0.

Code Implementation : Let's Program Blog

Features

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

Dependencies

Recommend to use the latest version of ng-angular-popup More Compatible with Latest version of Angular

ng-angular-popupAngular
current>= 13.x

For Lower version of Angular use

npm i ng-angular-popup -f

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"><!-- 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'});
  }

}

NEW features

  • Custom position for toaster
  //show Toast on top center position
  showSuccessTopCenter() {
    this.toast.success({detail:"SUCCESS",summary:'Your Success Message',duration:'5000', position:'topCenter'});
  }

  //show Toast on bottom center position
  showErrorBottonCenter() {
    this.toast.error({detail:"ERROR",summary:'Your Error Message',sticky:true, position:'bottomCenter'});
  }

  //show Toast on top left position
  showInfo() {
    this.toast.info({detail:"INFO",summary:'Your Info Message',sticky:true, position: 'topLeft'});
  }

  //show Toast on bottom left position
  showWarn() {
    this.toast.warn({detail:"WARN",summary:'Your Warn Message',duration:'5000', position: 'bottomLeft'});
  }

  //show Toast on top right position
  showInfo() {
    this.toast.info({detail:"INFO",summary:'Your Info Message',sticky:true, position: 'topRight'});
  }

  //show Toast on bottom right position
  showWarn() {
    this.toast.warn({detail:"WARN",summary:'Your Warn Message',duration:'5000', position: 'bottomRight'});
  }

}
  • Updated the Selector from to 
    <lib-ng-toast></lib-ng-toast> <!-- OLD WAY -->
    <ng-toast></ng-toast> <!-- NEW WAY -->
  • Customize the width based on your requirement
    <ng-toast [style]="{width:'300px'}"></ng-toast>
  • Updated the styles for Mobile responsive

FAQ

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

License

MIT

GitHub @SashikumarYadav  ·  Blog @LetsProgram  ·  LinkedIn @SashikumarYadav  ·  Medium @SashikumarYadav

ng-angular-popuptoaster npmng-toasternpm popuptoast notification
tslib
@everything-registry/sub-chunk-2271componentes-libcovid-compliance@infinitebrahmanuniverse/nolb-ng-a@zalastax/nolb-ng-a
0.4.8

6 months ago

13.0.0

6 months ago

0.5.0

6 months ago

0.5.2

6 months ago

0.5.1

6 months ago

0.3.9

11 months ago

0.4.5

10 months ago

0.3.6

11 months ago

0.4.4

11 months ago

0.3.5

11 months ago

0.4.7

10 months ago

0.3.8

11 months ago

0.4.6

10 months ago

0.3.7

11 months ago

0.4.1

11 months ago

0.3.2

11 months ago

0.4.0

11 months ago

0.4.3

11 months ago

0.3.4

11 months ago

0.4.2

11 months ago

0.3.3

11 months ago

0.3.0

1 year ago

0.3.1

1 year ago

0.2.0

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.9

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago