notify-dash/README.md

A modern, beautiful toast notification library for Angular

# Notify Dash - Toast Notifications for Angular

This library provides an easy way to display toast notifications in your Angular application.

Supports Angular 16, 17, and 18.
## Screenshots

![App Screenshot](https://github.com/user-attachments/assets/b364a3f6-e64d-4823-8f27-b29ab5559836)



## Installation

Install via npm:

```javascript
npm install notify-dash
```

## Setup
1. Import ToastModule in app.module.ts
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { ToastModule } from 'notify-dash';

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

2. Use ToastService in your component
Import and inject ToastService where you want to use the toast notifications:
```typescript
import { Component } from '@angular/core';
import { ToastService } from 'notify-dash';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {

  constructor(private toastService: ToastService) {}

  showSuccess() {
    this.toastService.success('Operation completed successfully!', 3000, 'top-right');
  }

  showError() {
    this.toastService.error('An error occurred. Please try again.', 3000, 'top-right');
  }

  showWarning() {
    this.toastService.warning('Please proceed with caution.', 3000, 'top-right');
  }

  showInfo() {
    this.toastService.info('Here\'s some useful information.', 3000, 'top-right');
  }

  showAtPosition(position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left') {
    this.toastService.success(`Toast shown at ${position} position`, 5000, position);
  }
}
```

In component's html template:
```typescript
<notify-toast></notify-toast>
```
## Toast Methods

- success(message: string, duration?: number, position?: string)
- error(message: string, duration?: number, position?: string)

- warning(message: string, duration?: number, position?: string)
- info(message: string, duration?: number, position?: string)

## Parameters



- message: string — The message you want to display.
- duration: number — Duration in milliseconds (default: 3000).
- position: string — Toast position. Accepted values: 'top-right', 'top-left', 'bottom-right', 'bottom-left'.

## Example
```typescript
this.toastService.success('Profile updated successfully!', 4000, 'bottom-left');
```