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-popup | Angular |
|---|---|
| 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