https://github.com/pascaliske/ngx-notifications

Simple notifications module for Angular.
https://github.com/pascaliske/ngx-notifications

angular library ngx notifications typescript

Last synced: 2 months ago
JSON representation

Simple notifications module for Angular.

• Host: GitHub
• URL: https://github.com/pascaliske/ngx-notifications
• Owner: pascaliske
• License: mit
• Archived: true
• Created: 2018-08-13T23:25:55.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-06-14T12:32:46.000Z (about 1 year ago)
• Last Synced: 2024-05-06T04:02:48.001Z (2 months ago)
• Topics: angular, library, ngx, notifications, typescript
• Language: TypeScript
• Homepage: https://pascaliske.dev
• Size: 5.58 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Lists

• awesome-angular-components - pascaliske/ngx-notifications - Notification module for Angular v6+. (UI Components / Notification)

README

        
# `@pascaliske/ngx-notifications`

[![npm (scoped)](https://img.shields.io/npm/v/@pascaliske/ngx-notifications.svg?style=flat-square)](https://www.npmjs.com/package/@pascaliske/ngx-notifications) [![GitHub Tag](https://img.shields.io/github/tag/pascaliske/ngx-notifications.svg?style=flat-square)](https://github.com/pascaliske/ngx-notifications) [![Build Status](https://img.shields.io/github/workflow/status/pascaliske/ngx-notifications/Test%20package/master?label=test&style=flat-square)](https://github.com/pascaliske/ngx-notifications/actions) [![Awesome Badges](https://img.shields.io/badge/badges-awesome-green.svg?style=flat-square)](https://github.com/Naereen/badges)

## Installation

To install the module use the following command:

```bash

$ ng add @pascaliske/ngx-notifications

```

## Usage

1. Import the module into your `AppModule`:

    ```typescript

    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:

    ```html

    

    ```

3. Access the `NotificationsService` in your components:

    ```typescript

    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:

    ```scss

    .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](https://pascaliske.dev)