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

Example with Background

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!');
  }