<!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

Keywords

FAQs

What is ng-angular-popup?

Is ng-angular-popup popular?

Is ng-angular-popup well maintained?

Last updated on 04 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install