{"id":28725800,"url":"https://github.com/DanielYKPan/ng-notifier","last_synced_at":"2025-06-15T12:07:59.432Z","repository":{"id":66329511,"uuid":"77709917","full_name":"DanielYKPan/ng-notifier","owner":"DanielYKPan","description":"Angular 2 Notifier Demo","archived":false,"fork":false,"pushed_at":"2017-04-03T04:02:22.000Z","size":2289,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-06T03:41:46.429Z","etag":null,"topics":["angular2","angularjs2","javascript","notify","typescript"],"latest_commit_sha":null,"homepage":"https://danielykpan.github.io/ng-notifier/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DanielYKPan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-30T20:53:50.000Z","updated_at":"2017-09-24T06:18:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"34540e0e-6910-449e-9ce8-185d9c1ef43a","html_url":"https://github.com/DanielYKPan/ng-notifier","commit_stats":null,"previous_names":["danielykpan/ng2-notifier"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DanielYKPan/ng-notifier","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielYKPan%2Fng-notifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielYKPan%2Fng-notifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielYKPan%2Fng-notifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielYKPan%2Fng-notifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DanielYKPan","download_url":"https://codeload.github.com/DanielYKPan/ng-notifier/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielYKPan%2Fng-notifier/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259816917,"owners_count":22916034,"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":["angular2","angularjs2","javascript","notify","typescript"],"created_at":"2025-06-15T12:07:58.414Z","updated_at":"2025-06-15T12:07:59.417Z","avatar_url":"https://github.com/DanielYKPan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Angular: Notifier (ng-notifier)\n===================\n\n## Important\nThis package is suitable to Angular v2.X and v4.X apps.\n\n## Usage\n\n1. Install ng-notifier using npm:\n\n    ``` npm install ng-notifier --save ```\n\n2. Add NotifierModule into your AppModule class. `app.module.ts` would look like this:\n\n    ```typescript\n    \n        import {NgModule} from '@angular/core';\n        import {BrowserModule} from '@angular/platform-browser';\n        import {AppComponent} from './app.component';\n        import {NotifierModule} from 'ng-notifier';\n        \n        @NgModule({\n          imports: [BrowserModule, NotifierModule.forRoot()],\n          declarations: [AppComponent],\n          bootstrap: [AppComponent],\n        })\n        export class AppModule {\n        \n        }\n    ```\n\n4. Inject 'NotifierService' class in your component class.\n\n    ```typescript\n        import { Component, OnInit, ViewContainerRef } from \"@angular/core\";\n        import { NotifierService } from 'ng-notifier';\n        \n        @Component({\n          selector: 'awesome-component',\n          template: '\u003cbutton class=\"btn btn-default\" (click)=\"showSuccess()\"\u003eNotifier Tester\u003c/button\u003e'\n        })\n        export class AppComponent implements OnInit {\n        \n          constructor( private notifier: NotifierService, \n                       private vRef: ViewContainerRef ) {\n            \n          }\n       \n           ngOnInit(): void {\n               this.notifier.setRootViewContainerRef(this.vRef);\n           }\n            \n          showSuccess() {\n            this.notifier.success('You are awesome!', 'Success!');\n          }\n        \n          showError() {\n            this.notifier.error('This is not good!', 'Oops!');\n          }\n        \n          showAlert() {\n            this.notifier.alert('You are being warned.', 'Alert!');\n          }\n        \n          showInfo() {\n            this.notifier.info('Just some information for you.');\n          }\n        }\n    ```\n\n### NotifierOptions Configurations\n\nBy default, the notifier will show up at bottom right corner of the page view, and will automatically dismiss in 3 seconds. \nYou can configure the notifiers using NotifierOptions class. Currently we support following options:\n\n##### notifierLife: (number)\nDetermines how long an auto-dismissed notifier will be shown. Defaults to 3000 miliseconds. If you set it to 0, the notifier will not auto-dismiss.\n\n##### maxStack: (number)\nDetermines maximum number of notifiers can be shown on the page in the same time. Defaults to 5.\n\n##### position: (Array)\nDetermines where on the page the notifier should be shown. Here are list of values: \n* ['bottom', 'right'] (Default)\n* ['bottom', 'center']\n* ['bottom', 'left']\n* ['top', 'right']\n* ['top', 'center']\n* ['top', 'left']\n\n##### messageClass: (string)\nCSS class for content within notifier.\n\n##### titleClass: (string)\nCSS class for title within notifier.\n\n##### animate: (string)\nYou have following choice: 'fade', 'flyLeft' or 'flyRight'.(Defaults to 'fade')\n* fade: makes every notifier either fade in or fade out.\n* rotate: makes every notifier either rotate in or rotate out.\n* scale: makes every notifier either scale in or scale out.\n* flyLeft: makes every notifier fly in from left side. \n* flyRight: makes every notifier fly in from right side.\n\nUse dependency inject for custom configurations. You can either inject into `app.module.ts` or any component class:\n   \n   ```typescript\n       import {NgModule} from '@angular/core';\n       import {BrowserModule} from '@angular/platform-browser';\n       import {AppComponent} from './app.component';\n       import {NotifierModule, NotifierOptions } from 'ng-notifier';\n       \n       let options: NotifierOptions = new NotifierOptions({\n         animate: 'flyRight',\n         position: ['top', 'right'],\n         notifierLife: 4000\n       });\n           \n       @NgModule({\n         imports: [\n             BrowserModule, \n             NotifierModule.forRoot(options),\n           ],\n         declarations: [AppComponent],\n         bootstrap: [AppComponent],\n       })\n       export class AppModule {\n       } \n   ```   \n    \n### \u003ca name='override'\u003e\u003c/a\u003eOverride global option:\n \n You can also override `notifierLife`, `titleClass`, `messageClass`, `animate`, options for individual notifier:\n    \n    this.notifier.sucess('This notifier will dismiss in 10 seconds.', null, {notifierLife: 10000});\n    this.notifier.info('This notifier will have \"new-title\" class in its title', null, {titleClass: 'new-title'});","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDanielYKPan%2Fng-notifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDanielYKPan%2Fng-notifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDanielYKPan%2Fng-notifier/lists"}