pascaliske / ngx-notifications

Simple notifications module for Angular.

@pascaliske/ngx-notifications

Installation

To install the module use the following command:

$ ng add @pascaliske/ngx-notifications

Usage

1. Import the module into your AppModule:

   import { NgModule } from '@angular/core'
   import { BrowserModule } from '@angular/platform-browser'
   import { NotificationsModule } from '@pascaliske/ngx-notifications'
   import { AppComponent } from './app.component'
   
   @NgModule({
       bootstrap: [AppComponent],
       declarations: [AppComponent],
       imports: [BrowserModule, NotificationsModule.forRoot()],
       providers: [],
   })
   export class AppModule {}

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