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