ngx-alertifying

October 21, 2025 · View on GitHub

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 VersionAngular VersionNode Version
3.x.x20.x22.x
2.x.x17.x18.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

no_bg

Example with Background

bg