Certainly! Here's a sample documentation for the ngonis-notification library, which can be used to help developers understand how to use it effectively in their Angular projects.

ngonis-notification Library Documentation

Overview

The ngonis-notification library provides a simple and reusable way to display dismissible alert notifications at the top-right corner of an Angular application. The alerts can be used to indicate success, error, warning, or informational messages, and they automatically disappear after a specified duration.

Installation

To install the ngonis-notification library, you need to add it to your Angular project. You can do this by building the library locally or by installing it from npm if it's published there.

1. Installing from npm (if available)

npm install ngonis-notification --save

2. Building and Installing Locally

If you have the source code for the library, you can build it locally:

ng build ngonis-notification

Then, install the library in your Angular project:

npm install dist/ngonis-notification

Usage

Importing the Module

First, you need to import the NgonisNotificationModule into your Angular application's main module (AppModule).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgonisNotificationModule } from 'ngonis-notification';

@NgModule({
  declarations: [
    AppComponent,
    // other components
  ],
  imports: [
    BrowserModule,
    NgonisNotificationModule, // Import the library module here
    // other modules
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Displaying Alerts

To display alerts, you need to use the AlertService provided by the ngonis-notification library. The service offers methods to show different types of alerts (success, error, warning, and info).

Example: Using Alerts in a Component

1. Inject the AlertService into your component.
2. Use the showSuccess, showError, showWarning, or showInfo methods to trigger alerts.

import { Component } from '@angular/core';
import { AlertService } from 'ngonis-notification';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private alertService: AlertService) {}

  showSuccess(): void {
    this.alertService.showSuccess('This is a success alert - check it out!');
  }

  showError(): void {
    this.alertService.showError('This is a danger alert - check it out!');
  }

  showWarning(): void {
    this.alertService.showWarning('This is a warning alert - check it out!');
  }

  showInfo(): void {
    this.alertService.showInfo('This is an info alert - check it out!');
  }
}

Adding the Alert Component to Your Template

To display the alerts, include the <ngonis-alert> component in your application's root template (typically app.component.html).

<ngonis-alert></ngonis-alert>

<!-- Buttons to trigger different alerts -->
<button (click)="showSuccess()">Show Success</button>
<button (click)="showError()">Show Error</button>
<button (click)="showWarning()">Show Warning</button>
<button (click)="showInfo()">Show Info</button>

Customization

The ngonis-notification library uses Bootstrap 4 classes for styling. If you want to customize the appearance of the alerts, you can override the default styles in your global styles file or within the component's CSS.

Example: Customizing Alert Styles

/* Custom styles for the alert container */
.alert-container {
  width: 350px; /* Custom width */
}

/* Custom styles for success alerts */
.alert-success {
  background-color: #28a745;
  color: #fff;
}

/* Custom styles for error alerts */
.alert-danger {
  background-color: #dc3545;
  color: #fff;
}

/* Custom styles for warning alerts */
.alert-warning {
  background-color: #ffc107;
  color: #212529;
}

/* Custom styles for info alerts */
.alert-info {
  background-color: #17a2b8;
  color: #fff;
}

Adding Icons

The library uses Dripicons by default. Ensure that the Dripicons CSS is included in your project, either through angular.json or directly in your styles.

Adding Dripicons to Your Project

1. Install Dripicons:

   npm install dripicons --save

2. Add Dripicons to angular.json:

   "styles": [
     "src/styles.css",
     "node_modules/dripicons/webfont.css"
   ],

3. Alternatively, add it to your global styles:

   @import '~dripicons/webfont.css';

Customization of Timeout

You can specify a custom timeout for each alert type:

this.alertService.showSuccess('This alert will disappear in 10 seconds', 10000);

The timeout parameter is optional and defaults to 5000 milliseconds (5 seconds) if not provided.

API Reference

AlertService

• showSuccess(message: string, timeout?: number): void
  Displays a success alert with the specified message.

• showError(message: string, timeout?: number): void
  Displays an error alert with the specified message.

• showWarning(message: string, timeout?: number): void
  Displays a warning alert with the specified message.

• showInfo(message: string, timeout?: number): void
  Displays an informational alert with the specified message.

• clear(): void
  Clears the currently displayed alert.

AlertComponent

The AlertComponent is responsible for displaying alerts on the screen. It is automatically rendered when an alert is triggered.

Contributing

If you want to contribute to the ngonis-notification library:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Submit a pull request.

License

The ngonis-notification library is licensed under the MIT License.

This documentation covers all the necessary steps for installation, usage, customization, and API details of the ngonis-notification library. It provides a clear guide for developers to integrate and utilize the library in their Angular projects.