🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Sign inDemoInstall
Socket

ngx-toastr

Package Overview
Dependencies
Maintainers
1
Versions
125
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-toastr

Toastr for Angular

19.0.0
latest
Source
npm
Version published
Weekly downloads
425K
-10.56%
Maintainers
1
Weekly downloads
 
Created

What is ngx-toastr?

ngx-toastr is an Angular library for displaying toast notifications. It provides a simple and customizable way to show alerts, messages, and notifications to users in an Angular application.

What are ngx-toastr's main functionalities?

Basic Toast Notification

This feature allows you to display a basic toast notification with a success message. The `ToastrService` is injected into the component, and the `success` method is called to show the notification.

import { ToastrService } from 'ngx-toastr';

constructor(private toastr: ToastrService) {}

showSuccess() {
  this.toastr.success('Hello world!', 'Toastr fun!');
}

Custom Toast Notification

This feature allows you to display a custom toast notification with additional options such as timeout, close button, and progress bar. The `show` method is used with custom configuration.

import { ToastrService } from 'ngx-toastr';

constructor(private toastr: ToastrService) {}

showCustom() {
  this.toastr.show('Custom message', 'Custom title', {
    timeOut: 3000,
    closeButton: true,
    progressBar: true
  });
}

Toast Notification with HTML Content

This feature allows you to display a toast notification with HTML content. The `enableHtml` option is set to true to allow HTML content in the message.

import { ToastrService } from 'ngx-toastr';

constructor(private toastr: ToastrService) {}

showHtml() {
  this.toastr.success('<span style="color: red">Hello world!</span>', 'Toastr fun!', {
    enableHtml: true
  });
}

Toast Notification Positioning

This feature allows you to control the positioning of the toast notification. The `positionClass` option is used to set the position of the toast, such as 'toast-top-right'.

import { ToastrService } from 'ngx-toastr';

constructor(private toastr: ToastrService) {}

showTopRight() {
  this.toastr.success('Hello world!', 'Toastr fun!', {
    positionClass: 'toast-top-right'
  });
}

Other packages similar to ngx-toastr

Keywords

ng2

FAQs

Package last updated on 01 Jun 2024

Did you know?

Socket

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

Related posts