JSPM – ng-angular-popup@0.6.1

Package Exports

ng-angular-popup
ng-angular-popup/ng-toast
ng-angular-popup/package.json

Readme

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

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