@pascaliske/ngx-notifications

Installation

To install the module use the following command:

$ ng add @pascaliske/ngx-notifications

Usage

1. Import the provideNotifications() function in your application configuration file.:

   import type { ApplicationConfig } from '@angular/core'
   import { provideNotifications } from '@pascaliske/ngx-notifications'
   
   export const appConfig: ApplicationConfig = {
       providers: [
           provideExperimentalZonelessChangeDetection(),
           provideNotifications(),
       ],
   }

2. Add the following line to your app's template:

   <cmp-notifications></cmp-notifications>

3. Access the NotificationsService in your components:

   import { Component, OnInit } from '@angular/core'
   import { NotificationsService } from '@pascaliske/ngx-notifications'
   
   @Component({
       selector: 'cmp-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.scss'],
   })
   export class AppComponent implements OnInit {
       public constructor(private notificationService: NotificationsService) {}
   
       public ngOnInit(): void {
           this.notificationService.info('Hello World!')
       }
   }

4. Style the notifications with your own styles:

   .cmp-notifications {
       // the notifications list
   }
   
   .cmp-notification {
       // a single notification
   
       &--info {
           // info styles
       }
   
       &--success {
           // success styles
       }
   
       &--warning {
           // warning styles
       }
   
       &--error {
           // error styles
       }
   }

License

MIT © Pascal Iske