ng-angular-popup

ng-angular-popup

This library was generated with Angular CLI version 18.0.1.

Code Implementation : Let's Program Blog

Changelog

• Removed the object way of configuration
• Removed dependency of font-awesome
• Updated the library with Angular v18
• Signal usage for better compatibility with zoneless

Features

• Easy to integrate
• Supports success, error, info and warning toaster messages
• Easy to configure
• supports title, message , position, duration
• New UI design with better accessibility

Dependencies

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

ng-angular-popup	Angular
current	>= 16.x
0.5.2	<= 15.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

• 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 { }

• Add NgToasterModule to Standalone root component

• import NgToastModule in app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgToastModule } from 'ng-angular-popup' // to be added
import { ToasterPosition } from 'ng-toasty'; // to be added to load position enums

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NgToastModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'angular-v18-playground';
  ToasterPosition = ToasterPosition;
}

• use the selector in app.component.html file

<ng-toast />  <!-- takes default width of 350px and top-right position   -->
<ng-toast [width]="400" /> <!-- configure width   -->
<ng-toast [width]="300" [position]="ToasterPosition.TOP_CENTER" /> <!-- configure width with position   -->

Use

import { Component } from '@angular/core';
import { NgToastService } from 'ng-angular-popup'; //make sure to import service

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

  private = inject(NgToastService); //inject the service

  ngOnInit(): void {
  }

  error(){
    this.toast.danger("This is new error message"); // by default visible duration is 2000ms
  }

  success(){
    this.toast.success("This is new error Success", "SUCCESS", 5000) // message with title and 5000ms duration
  }

  info(){
    this.toast.info("This is new error Info", "INFO", 5000)
  }

  warning(){
    this.toast.warning("This is new Warning message", "WARNING", 5000)
  }

}

FAQ

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

License

MIT

---

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