1.1.1 • Published 25 days ago

easy-angular-alerts v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
25 days ago

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.

Features

  • Simple alert
  • Error alert
  • Confirmation alert with buttons
  • Closeable alert with a button
  • Fully customizable: colors, font, position, animations, icons, 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, 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 { }

Using the Alert Service Inject the AlertService into your component and use it to display alerts.

import { Component } from '@angular/core';
import { AlertService } from 'easy-angular-alerts';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showSimpleAlert()">Show Simple Alert</button>
    <button (click)="showCloseableAlert()">Show Closeable Alert</button>
    <button (click)="showConfirmationAlert()">Show Confirmation Alert</button>
    <button (click)="showErrorAlert()">Show Error Alert</button>
  `
})
export class AppComponent {
  constructor(private alertService: AlertService) {}

  showSimpleAlert() {
    this.alertService.showAlert({
      type: 'simple',
      message: 'This is a simple alert!',
      duration: 3000,
      icon: '🔔'
    });
  }

  showCloseableAlert() {
    this.alertService.showAlert({
      type: 'closeable',
      message: 'This is a closeable alert!',
      verticalPosition: 'top',
      horizontalPosition: 'center',
      icon: '⚠️'
    });
  }

  showConfirmationAlert() {
    this.alertService.showAlert({
      type: 'confirmation',
      message: 'Are you sure you want to proceed?',
      confirmText: 'Yes',
      verticalPosition: 'center',
      horizontalPosition: 'left',
      icon: '❓'
    }, () => this.onConfirm(), () => this.onCancel());
  }

  showErrorAlert() {
    this.alertService.showAlert({
      type: 'error',
      message: 'This is an error alert!',
      duration: 3000,
      icon: '❌'
    });
  }

  onConfirm() {
    console.log('Confirmed!');
    this.alertService.showAlert({
      type: 'simple',
      message: 'Action confirmed!',
      backgroundColor: 'green',
      textColor: 'white',
      verticalPosition: 'top',
      horizontalPosition: 'center',
      duration: 3000
    });
  }

  onCancel() {
    console.log('Cancelled!');
    this.alertService.showAlert({
      type: 'simple',
      message: 'Action cancelled!',
      backgroundColor: 'red',
      textColor: 'white',
      verticalPosition: 'top',
      horizontalPosition: 'center',
      duration: 3000
    });
  }
}

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

type: Type of alert (simple, error, confirmation, closeable)
message: The alert message
backgroundColor: Background color of the alert
textColor: Text color of the alert
buttonColor: Background color of the buttons (for confirmation and closeable alerts)
buttonTextColor: Text color of the buttons (for confirmation and closeable alerts)
confirmText: Text for the confirmation button (for confirmation alerts)
duration: Duration before the alert auto-closes (in milliseconds)
verticalPosition: Vertical position (top, center, bottom)
horizontalPosition: Horizontal position (left, center, right)
fontSize: Font size of the alert message
fontFamily: Font family of the alert message
borderStyle: CSS border style of the alert
animation: CSS animation for the alert
icon: Icon to display in the alert
width: Width of the alert
boxShadow: Box shadow for the alert

Examples Simple Alert

this.alertService.showAlert({
  type: 'simple',
  message: 'This is a simple alert!',
  duration: 3000,
  icon: '🔔'
});

Closeable Alert

this.alertService.showAlert({
  type: 'closeable',
  message: 'This is a closeable alert!',
  verticalPosition: 'top',
  horizontalPosition: 'center',
  icon: '⚠️'
});

Confirmation Alert

this.alertService.showAlert({
  type: 'confirmation',
  message: 'Are you sure you want to proceed?',
  confirmText: 'Yes',
  verticalPosition: 'center',
  horizontalPosition: 'left',
  icon: '❓'
}, () => this.onConfirm(), () => this.onCancel());

Error Alert

this.alertService.showAlert({
  type: 'error',
  message: 'This is an error alert!',
  duration: 3000,
  icon: '❌'
});

Handling Confirmation and Cancellation For confirmation alerts, you can pass callback functions to handle the user's actions.

showConfirmationAlert() {
  this.alertService.showAlert({
    type: 'confirmation',
    message: 'Are you sure you want to proceed?',
    confirmText: 'Yes',
    verticalPosition: 'center',
    horizontalPosition: 'left',
    icon: '❓'
  }, () => this.onConfirm(), () => this.onCancel());
}

onConfirm() {
  console.log('Confirmed!');
  this.alertService.showAlert({
    type: 'simple',
    message: 'Action confirmed!',
    backgroundColor: 'green',
    textColor: 'white',
    verticalPosition: 'top',
    horizontalPosition: 'center',
    duration: 3000
  });
}

onCancel() {
  console.log('Cancelled!');
  this.alertService.showAlert({
    type: 'simple',
    message: 'Action cancelled!',
    backgroundColor: 'red',
    textColor: 'white',
    verticalPosition: 'top',
    horizontalPosition: 'center',
    duration: 3000
  });
}

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.

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

1.0.1

26 days ago

10.0.0

25 days ago

10.0.1

25 days ago

3.0.0

25 days ago

9.1.1

26 days ago

1.1.1

25 days ago

1.1.0

25 days ago

9.1.4

26 days ago

9.1.2

26 days ago

1.0.18

28 days ago

1.0.0

28 days ago

9.0.6

28 days ago

9.0.5

28 days ago

9.0.4

28 days ago

9.0.3

28 days ago

8.0.9

28 days ago

8.0.8

28 days ago

8.0.5

28 days ago

2.0.7

28 days ago

8.0.4

28 days ago

2.0.6

28 days ago

8.0.7

28 days ago

2.0.9

28 days ago

8.0.6

28 days ago

2.0.8

28 days ago

3.0.4

28 days ago

3.0.3

28 days ago

3.0.2

28 days ago

3.0.1

28 days ago

4.0.5

28 days ago

4.0.0

28 days ago

5.0.0

28 days ago

6.0.0

28 days ago

2.0.11

28 days ago

2.0.10

28 days ago

7.0.0

28 days ago

8.0.1

28 days ago

8.0.3

28 days ago

8.0.2

28 days ago

9.0.2

28 days ago

9.0.1

28 days ago

9.0.0

28 days ago

1.0.19

1 month ago

1.0.2

1 month ago

1.0.17

1 month ago

1.0.9

1 month ago

1.0.8

1 month ago

1.0.7

1 month ago

1.0.6

1 month ago

1.0.5

1 month ago

1.0.4

1 month ago

1.0.3

1 month ago

2.0.3

1 month ago

2.0.2

1 month ago

2.0.5

30 days ago

2.0.4

30 days ago

2.0.1

1 month ago

1.0.27

1 month ago

0.0.10

1 month ago

1.0.11

1 month ago

0.0.9

1 month ago

1.0.10

1 month ago

0.0.8

1 month ago

1.0.31

1 month ago

1.0.15

1 month ago

1.0.14

1 month ago

1.0.13

1 month ago

0.0.7

1 month ago

1.0.12

1 month ago

0.0.6

1 month ago

0.0.5

1 month ago

0.0.4

1 month ago

0.0.3

1 month ago

0.0.2

1 month ago

0.0.1

1 month ago