{"id":13729205,"url":"https://github.com/LenonLopez/angular-notice","last_synced_at":"2025-05-08T01:31:56.636Z","repository":{"id":25695906,"uuid":"104594169","full_name":"LenonLopez/angular-notice","owner":"LenonLopez","description":"Native notifications for your Angular application using the Web Notification API. Works on chrome, firefox, edge, and safari.","archived":false,"fork":false,"pushed_at":"2023-01-03T17:28:40.000Z","size":2541,"stargazers_count":12,"open_issues_count":27,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-14T20:37:43.073Z","etag":null,"topics":["angular","angular2","angular4","angular5","angular7","native","notifications"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LenonLopez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-23T19:39:26.000Z","updated_at":"2023-06-22T07:07:36.000Z","dependencies_parsed_at":"2023-01-14T03:09:36.788Z","dependency_job_id":null,"html_url":"https://github.com/LenonLopez/angular-notice","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenonLopez%2Fangular-notice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenonLopez%2Fangular-notice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenonLopez%2Fangular-notice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenonLopez%2Fangular-notice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LenonLopez","download_url":"https://codeload.github.com/LenonLopez/angular-notice/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252981577,"owners_count":21835454,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular4","angular5","angular7","native","notifications"],"created_at":"2024-08-03T02:00:56.771Z","updated_at":"2025-05-08T01:31:56.316Z","avatar_url":"https://github.com/LenonLopez.png","language":"TypeScript","readme":"# angular-notice\n\u003e Native Notifications\n\n## Development\n* Updated for angular 7\n* npm module now created via the angular CLI, this will result in faster and easier updates\n* Fixed security vulnerabilities within dependencies\n* 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.\n\n## Setup\n1. Install angular-notice\n```bash\n\tnpm i angular-notice\n```\n2. Import Module\n\u003e import NotificationsModule and add it to the imports array within your app's module\n```typescript\n \n        import { BrowserModule } from '@angular/platform-browser';\n        import { NgModule } from '@angular/core';\n        import { AppComponent } from './app.component';\n        import { NativeNotificationsService } from 'angular-notice'\n        \n        @NgModule({\n        declarations: [\n            AppComponent\n        ],\n        imports: [\n            BrowserModule            \n        ],\n        providers: [NativeNotificationsService], // add to your module's providers array\n        bootstrap: [AppComponent]\n        })\n        export class AppModule { }\n```      \n3. Import NativeNotificationService and inject\n\u003e import the NativeNotificationService in your app's component and inject it into your app's constructor\n```typescript\n        import { Component } from '@angular/core';\n        import { NativeNotificationService } from 'angular-notice'; // import within component\n        \n        @Component({\n        selector: 'app-root',\n        templateUrl: './app.component.html',\n        styleUrls: ['./app.component.css']\n        })\n        \n        export class AppComponent {\n        title = 'app';\n\n        constructor(private _service: NativeNotificationService) {} // angular will inject the service here via dependency injection\n \n        }\n```\n4. Call notify\n\u003e call the .notify() method off of the service.\n```typescript\n          someMethodThatGetsCalledWithinComponent(){\n                const options =  { \n                                    title: 'hello world',\n                                    body : 'this is a notification body',\n                                    dir: 'ltr',\n                                    icon: '../assets/ng-shield.png',\n                                    tag: 'notice',\n                                    closeDelay: 2000\n                                };\n                this._service.notify(options);\n            }\n```\n\n## Notes\n* Chrome requires that a domain must have an SSL certificate for the notification to display.\n* Mobile version of chrome seems to ignore notifications - this is an issue that i'm looking into.\n* This uses the Web Notifications API, so this will work on browsers which implement that standard.\n","funding_links":[],"categories":["UI Components"],"sub_categories":["Notification"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLenonLopez%2Fangular-notice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLenonLopez%2Fangular-notice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLenonLopez%2Fangular-notice/lists"}