@christophhu/ngx-notifications v19.2.1

Ngx-Notifications

Frameworks and Languages

Demo

Description

This Repository is a demo application for the ngx-notifications library. The library adds notifications to your Angular application. It provides a simple API to create notifications with different types (info, success, warning, error) and positions (top-right, top-left, bottom-right, bottom-left). The library is easy to use and can be installed via npm.

Installation

To run this project, you need to have Node.js installed on your machine. Clone the repository and run the following commands:

npm i @christophhu/ngx-notifications

Use

<notification></notification>

import { NotificationComponent, NotificationType, NotificationsService } from '@christophhu/ngx-notifications';

@Component({
  ...
  imports: [
    NotificationComponent
  ],
  providers: [
    LogService
  ]
})
export class TestComponent {
  constructor(private _notificationsService: NotificationsService) {}

  error() {
    this._notificationsService.open({ type: 'error', header: 'Fehler', message: 'Es ist ein Fehler aufgetreten', autoClose: true })?.subscribe((data: any) => { 
      // if (data == true) alert('yes')
    })
  }

  request() {
    this._notificationsService.open({ type: 'request', header: 'Event beendet', message: 'Möchten Sie einen neuen Event vorbereiten (ja) oder den angezeigten Event ansehen (nein)? Dann haben Sie die Möglichkeit hier. Hier soll nun auch getestet werden ob die Notification frei skaliert.', autoClose: false })?.subscribe((data: any) => { 
      if (data) console.log(data)
    })
  }

  success() {
    this._notificationsService.open({ type: 'success', header: 'Erfolg', message: 'Erfolgreich abgeschlossen', autoClose: false })?.subscribe((data: any) => { 
      // if (data == true) alert('yes')
    })
  }

  warning() {
    this._notificationsService.open({ type: 'warning', header: 'Achtung', message: 'Es muss folgendes beachtet werden:', autoClose: false })?.subscribe((data: any) => { 
      if (data) console.log(data)
    })
  }
}

Configuration

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'
import { provideNotifications } from '@christophhu/ngx-notifications'

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    provideNotifications({ type: 'info', position: 'top-center', header: '', message: '', autoclose: true, timeout: 15000, max: 5 }),
    provideZoneChangeDetection({ eventCoalescing: true })
  ]
};