https://github.com/LenonLopez/angular-notice

Native notifications for your Angular application using the Web Notification API. Works on chrome, firefox, edge, and safari.
https://github.com/LenonLopez/angular-notice

angular angular2 angular4 angular5 angular7 native notifications

Last synced: 3 months ago
JSON representation

Native notifications for your Angular application using the Web Notification API. Works on chrome, firefox, edge, and safari.

• Host: GitHub
• URL: https://github.com/LenonLopez/angular-notice
• Owner: LenonLopez
• Created: 2017-09-23T19:39:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T17:28:40.000Z (about 2 years ago)
• Last Synced: 2024-08-10T20:01:35.396Z (6 months ago)
• Topics: angular, angular2, angular4, angular5, angular7, native, notifications
• Language: TypeScript
• Homepage:
• Size: 2.42 MB
• Stars: 12
• Watchers: 3
• Forks: 4
• Open Issues: 27
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular-components - LenonLopez/angular-notice - Native notifications for your Angular application using the Web Notification API. Works on chrome, firefox, edge, and safari. (UI Components / Notification)

README

        
# angular-notice

> Native Notifications

## Development

* Updated for angular 7

* npm module now created via the angular CLI, this will result in faster and easier updates

* Fixed security vulnerabilities within dependencies

* Simplified import. No longer do you need to import a module - it is now a pure service that gets added to your main app module's providers array. This forces the notifications service to be a singleton. If you need seperate instances for all your components, then simply import the service into that particular component's providers array.

## Setup

1. Install angular-notice

```bash

	npm i angular-notice

```

2. Import Module

> import NotificationsModule and add it to the imports array within your app's module

```typescript

 

        import { BrowserModule } from '@angular/platform-browser';

        import { NgModule } from '@angular/core';

        import { AppComponent } from './app.component';

        import { NativeNotificationsService } from 'angular-notice'

        

        @NgModule({

        declarations: [

            AppComponent

        ],

        imports: [

            BrowserModule            

        ],

        providers: [NativeNotificationsService], // add to your module's providers array

        bootstrap: [AppComponent]

        })

        export class AppModule { }

```      

3. Import NativeNotificationService and inject

> import the NativeNotificationService in your app's component and inject it into your app's constructor

```typescript

        import { Component } from '@angular/core';

        import { NativeNotificationService } from 'angular-notice'; // import within component

        

        @Component({

        selector: 'app-root',

        templateUrl: './app.component.html',

        styleUrls: ['./app.component.css']

        })

        

        export class AppComponent {

        title = 'app';

        constructor(private _service: NativeNotificationService) {} // angular will inject the service here via dependency injection

 

        }

```

4. Call notify

> call the .notify() method off of the service.

```typescript

          someMethodThatGetsCalledWithinComponent(){

                const options =  { 

                                    title: 'hello world',

                                    body : 'this is a notification body',

                                    dir: 'ltr',

                                    icon: '../assets/ng-shield.png',

                                    tag: 'notice',

                                    closeDelay: 2000

                                };

                this._service.notify(options);

            }

```

## Notes

* Chrome requires that a domain must have an SSL certificate for the notification to display.

* Mobile version of chrome seems to ignore notifications - this is an issue that i'm looking into.

* This uses the Web Notifications API, so this will work on browsers which implement that standard.