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.

Version map

| NgxMatForm Version | Angular Version | Node Version | |--------------------|-----------------|--------------| | 3.x.x | 20.x | 22.x | | 2.x.x | 17.x | 18.x |

Installation

npm install ngx-alertifying

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>

Alert usage

@import { ToastService } from 'ngx-alertifying';

export class AppComponent {

    constructor(private readonly toastService: ToastService );

    openToast(): void {
        this.toastService.addInfo('Info alert message');
        this.toastService.addError('Error alert message');
        this.toastService.addSuccess('Success alert message');
        this.toastService.addWarning('Warning alert message');
    }
}

Component visual look

Example with no Background

Example with Background