Easy Angular Alerts

A customizable alert library for Angular applications. Easy Angular Alerts provides a flexible way to display various types of alerts and notifications in your Angular projects.

Table of Contents

• Default Styles
• Features
• Installation
• Usage
• Import the Module
• Using the Alert Service
• Customization
• Usage Example
• Inputs Summary
• Contributing
• License
• Support
• Author

Default Styles

Features

• Simple alert
• Error alert
• Confirmation alert with buttons
• Closeable alert with a button
• Fully customizable: colors, font, position and more
• Built-in default styles for each alert type

Installation

Install the library using npm:

npm install easy-angular-alerts

Usage

Import the Module First (if applicable), import the EasyAngularAlertsModule in your Angular application's module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { EasyAngularAlertsModule } from 'easy-angular-alerts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    EasyAngularAlertsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ADD THIS INTO 'angular.json' CONFIRMATION ICONS WILL NOT WORK WITHOUT THIS LINE

"styles": [
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]

Using the Alert Service

Implement neccessary imports to your app.component.ts class.

import { AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';
import { AlertService } from 'easy-angular-alerts';

Add this class member

@ViewChild('alertContainer', { read: ViewContainerRef })alertContainer!: ViewContainerRef;

Inject AlertService into your app.component.ts

constructor(private alertService: AlertService){}

Add ngAfterViewInit function

ngAfterViewInit(): void {
  this.alertService.setViewContainerRef(this.alertContainer);  
}

Finally add <div #alertContainer> into your app.component.html

<router-outlet></router-outlet>
<div #alertContainer></div>

Implementation Example

app.component.ts

import { HttpClientModule } from '@angular/common/http';
import { AfterViewInit, Component, ViewChild, ViewContainerRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';
import { AlertService } from 'easy-angular-alerts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, FormsModule, HttpClientModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('alertContainer', { read: ViewContainerRef }) alertContainer!: ViewContainerRef;

    constructor(private alertService: AlertService){}
  ngAfterViewInit(): void {
    this.alertService.setViewContainerRef(this.alertContainer);
  }
  title = 'frontend';
}

app.component.html

<router-outlet></router-outlet>
<div #alertContainer></div>

Customization

You can customize the alerts by passing additional properties to the showAlert method. Below are the available customization options:

REQUIRED: type

Description: Type of alert. Values: 'simple', 'error', 'confirmation', 'closeable' Example:

type: 'simple'

REQUIRED: message

Description: The alert message. Example:

message: 'This alert can be closed!'

backgroundColor

Description: Background color of the alert. Example:

backgroundColor: '#DCFFE0'

textColor

Description: Text color of the alert. Example:

textColor: 'black'

duration (NOT ALLOWED IN confirmation TYPE)

Description: Duration before the alert auto-closes (in milliseconds). Example:

duration: 3000

verticalPosition

Description: Vertical position of the alert. Values: 'top', 'center', 'bottom' Example:

verticalPosition: 'bottom'

horizontalPosition

Description: Horizontal position of the alert. Values: 'left', 'center', 'right' Example:

horizontalPosition: 'center'

fontSize

Description: Font size of the alert message. Example:

fontSize: '.9em'

fontFamily

Description: Font family of the alert message. Example:

fontFamily: 'Newsreader, sans-serif'

borderStyle

Description: CSS border style of the alert. Example:

borderStyle: '1pt solid #61A868'

width

Description: Width of the alert. Example:

width: 'auto'

height

Description: Height of the alert. Example:

height: 'auto'

boxShadow

Description: Box shadow for the alert. Example:

boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'

borderStyle

Description: Box shadow for the alert. Example:

borderStyle: 'solid 1px black',

Usage Example

import { AlertService } from 'easy-angular-alerts';

// Example usage
this.alertService.showAlert({
  type: 'simple',
  message: 'This is a simple alert!',
  backgroundColor: '#DCFFE0',
  textColor: 'black',
  duration: 3000,
  verticalPosition: 'bottom',
  horizontalPosition: 'center',
  fontSize: '1em',
  fontFamily: 'Arial, sans-serif',
  borderStyle: '1pt solid #61A868',
  width: 'auto',
  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
});

import { AlertService } from 'easy-angular-alerts';

// Example usage for simple alert
this.alertService.showAlert({
  type: 'simple',
  message: 'This is a simple alert with different styles!',
  backgroundColor: '#F0F8FF',
  textColor: '#00008B',
  duration: 5000,
  verticalPosition: 'top',
  horizontalPosition: 'left',
  fontSize: '1.2em',
  fontFamily: 'Verdana, sans-serif',
  borderStyle: '2pt dashed #00008B',
  width: '400px',
  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
});

// Example usage for error alert
this.alertService.showAlert({
  type: 'error',
  message: 'This is an error alert with custom styles!',
  backgroundColor: '#FFCCCB',
  textColor: '#8B0000',
  duration: 4000,
  verticalPosition: 'center',
  horizontalPosition: 'right',
  fontSize: '1em',
  fontFamily: 'Courier New, monospace',
  borderStyle: '1pt solid #8B0000',
  width: '350px',
  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.3)'
});

// Example usage for confirmation alert
this.alertService.showAlert({
  type: 'confirmation',
  message: 'Do you confirm this custom action?',
  backgroundColor: '#E0FFFF',
  textColor: '#008B8B',
  verticalPosition: 'bottom',
  horizontalPosition: 'center',
  fontSize: '1em',
  fontFamily: 'Tahoma, sans-serif',
  borderStyle: '1pt solid #008B8B',
  width: '300px',
  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
}, () => {
  alert('Confirmed!'); // On confirm do something here
}, () => {
  alert('Cancelled!'); // On cancel do something here
});

// Example usage for closeable alert
this.alertService.showAlert({
  type: 'closeable',
  message: 'This closeable alert has custom styles!',
  backgroundColor: '#FFFACD',
  textColor: '#B8860B',
  verticalPosition: 'top',
  horizontalPosition: 'center',
  fontSize: '1.1em',
  fontFamily: 'Georgia, serif',
  borderStyle: '1pt solid #B8860B',
  width: '450px',
  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.25)'
});

Inputs Summary

  @Input() type: 'simple' | 'error' | 'confirmation' | 'closeable' = 'simple';
  @Input() message: string = '';
  @Input() backgroundColor?: string;
  @Input() textColor?: string;
  @Input() duration: number = 3000;
  @Input() verticalPosition: 'top' | 'center' | 'bottom' = 'bottom';
  @Input() horizontalPosition: 'left' | 'center' | 'right' = 'center';
  @Input() fontSize: string = '.9em';
  @Input() fontFamily: string = 'Newsreader, sans-serif';
  @Input() borderStyle: string = 'none';
  @Input() width: string = 'auto';
  @Input() height: string = 'auto';
  @Input() boxShadow: string = 'none';

Ensure you add these customizations as needed to fit your specific use cases!

Contributing Contributions are welcome! Please feel free to submit a pull request or open an issue on GitHub.

License This project is licensed under the MIT License - see the LICENSE file for details.

Support If you have any questions or need support, please open an issue on GitHub. -https://github.com/ColeBaxendale/easy-angular-alerts/issues

Author Cole Baxendale - https://github.com/ColeBaxendale