ngx-alertifying
TypeScript icon, indicating that this package has built-in type declarations

2.1.6 • Public • Published

ngx-alertifying


Description

ngx-alertifying library is a valuable tool for developers seeking a straightforward and stylish method to display important messages within their Angular applications. Our alert message component provides instant feedback on actions, errors, or confirmations, enhancing user experience significantly.

Key Features

  • Complete Customization: Tailor alert messages to match your application perfectly by choosing colors, icons, and animations.

  • Versatile Alert Types: Choose from various alert types, including information, warning, success, and danger, to suit different usage contexts.

  • Easy Integration: Seamless integration into your Angular application. Start displaying alert messages in just a few minutes.

  • Responsive and Appealing: Designed for seamless functionality across devices of all sizes, ensuring a consistent user experience on any screen.

  • Enhanced Accessibility: Our alert messages are designed for easy readability and usability, catering to all users, including those with disabilities.

Installation

npm install ngx-alertifying

Alert Basic usage

import { NgxAlertifyingModule } from 'ngx-alertifying';

@NgModule({
imports: [NgxAlertifyingModule],
// ...
})
export class YourModule { }

Configuration

Module accepts also configuration for the colors and the style of the alert

import { NgxAlertifyingModule } from 'ngx-alertifying';
// Color: use html colors like #fcfcfc
// style: ALERT_STYLE.MATERIAL - ALERT_STYLE.BOOTSTRAP

@NgModule({
imports: [NgxAlertifyingModule.forRoot({
    infoColor: '',  
    warningColor: '',
    dangerColor: '',
    successColor: '',
    style: ALERT_STYLE.MATERIAL
})],
//
})
export class YourModule { }

Component usage example

<ngx-alert [message]="'This is a info alert—check it out!'" [type]="typeInfo"></ngx-alert>

<ngx-alert [title]="'Hey, this is an alert title'" [message]="'This is a info alert—check it out!'" [type]="typeInfo"></ngx-alert>

<ngx-alert [message]="'This is a info alert—check it out!'" [type]="typeInfo" [showBackground]="true"></ngx-alert>

<ngx-alert [title]="'Hey, this is an alert title'" [message]="'This is a info alert—check it out!'" [type]="typeInfo" [showBackground]="true"></ngx-alert>

Component visual look

Example with no Background

no_bg

Example with Background

bg

Toast Basic usage

Configuration

Module accepts also configuration for the colors and the style of the alert

import { NgxAlertifyingModule } from 'ngx-alertifying';

@NgModule({
imports: [NgxAlertifyingModule.forRoot({
    toastDuration: 3000
})],
//
})
export class YourModule { }

Component usage example

  import { ToastService } from 'ngx-alertifying';

  constructor(private toastService: ToastService){}

  addInfo(): void {
    this.toastService.addInfo('This is an info toast message!');
  }

  addError(): void {
    this.toastService.addError('This is an error toast message!');
  }

  addSuccess(): void {
    this.toastService.addSuccess('This is a success toast message!');
  }

  addWarning(): void {
    this.toastService.addWarning('This is a warning toast message!');
  }

Package Sidebar

Install

npm i ngx-alertifying

Weekly Downloads

1

Version

2.1.6

License

ISC

Unpacked Size

77.7 kB

Total Files

26

Last publish

Collaborators

  • salromagu