{"id":13497265,"url":"https://github.com/jdjuan/ng-notyf","last_synced_at":"2025-07-02T23:32:18.631Z","repository":{"id":19855729,"uuid":"88105915","full_name":"jdjuan/ng-notyf","owner":"jdjuan","description":"👻 A dead simple notification library for Angular 👻","archived":false,"fork":false,"pushed_at":"2023-04-18T09:51:36.000Z","size":2458,"stargazers_count":99,"open_issues_count":9,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-30T13:34:13.867Z","etag":null,"topics":["angular","angular2-component","notification","typescript"],"latest_commit_sha":null,"homepage":"https://jdjuan.github.io/ng-notyf/","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/jdjuan.png","metadata":{"files":{"readme":"README.MD","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"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":"2017-04-12T23:39:16.000Z","updated_at":"2024-09-24T00:12:57.000Z","dependencies_parsed_at":"2024-05-11T16:47:08.762Z","dependency_job_id":"9fa24e8e-5c10-4601-9172-ab2c77a650d4","html_url":"https://github.com/jdjuan/ng-notyf","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdjuan/ng-notyf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdjuan%2Fng-notyf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdjuan%2Fng-notyf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdjuan%2Fng-notyf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdjuan%2Fng-notyf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdjuan","download_url":"https://codeload.github.com/jdjuan/ng-notyf/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdjuan%2Fng-notyf/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263232653,"owners_count":23434715,"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-component","notification","typescript"],"created_at":"2024-07-31T20:00:27.733Z","updated_at":"2025-07-02T23:32:18.567Z","avatar_url":"https://github.com/jdjuan.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","UI Components"],"sub_categories":["Uncategorized","Table"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg width=100% src=\"ng-notyf-logo.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://jdjuan.github.io/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/😍-Beatiful_Notifications-1d2935.svg?style=flat\" alt=\"Beautiful Notifications\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#-usage-\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/📦-Easy_Setup-1d2935.svg?style=flat\" alt=\"Easy Setup\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#-customizing-\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/🔨-Highly_Customizable-1d2935.svg?style=flat\" alt=\"Highly Customizable\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"http://makeapullrequest.com/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/😁-PRs_Welcome-1d2935.svg?style=flat\" alt=\"PRs Welcome\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://twitter.com/jdjuan\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/👦-@jdjuan-1d2935.svg?style=flat\" alt=\"@jdjuan\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/caroso1222\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/👨-@caroso1222-1d2935.svg?style=flat\" alt=\"@caroso1222\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://github.com/jdjuan/ng-notyf/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/jdjuan/ng-notyf.svg?style=social\" alt=\"GitHub stars\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/jdjuan/ng-notyf/watchers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/watchers/jdjuan/ng-notyf.svg?style=social\" alt=\"GitHub watchers\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=Check%20this%20Angular%20library!%20%E2%9C%A8%20Beautiful%20notifications%20in%20your%20app%20%E2%9C%A8%20https://jdjuan.github.io/%20%F0%9F%A4%97\n\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/url/https/github.com/jdjuan/ng-notyf.svg?style=social\" alt=\"Tweet\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://jdjuan.github.io/ng-notyf/\"\u003e\n    \u003cimg src=\"https://media.giphy.com/media/l4FGkfHOYuEweAEQ8/giphy.gif\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# 📦 Installation 📦\n\nTo install this library, run this command in your Angular application:\n\n`$ npm install ng-notyf --save`\n\nIf you use Angular 2 you should already have `@angular/animations` package installed, but if you use Angular 4, you might not, so don't forget to install it:\n\n`$ npm install @angular/animations --save`\n\n# 🔥 Usage 🔥\n\n### 1. Import `ng-notyf` into you `app.module`\n\n```javascript\nimport { NotyfModule } from 'ng-notyf';\n\n@NgModule({\n  imports: [\n    NotyfModule\n  ],\n  declarations: [...],\n  exports: [...],\n  providers: [...]\n})\n```\n\n### 2. Inject `ng-notyf` service into your component\n\n```javascript\nimport { NotyfService } from 'ng-notyf';\n\nexport class myComponent {\n\n  constructor(\n    private notyfService: NotyfService\n  ) { }\n\n}\n```\n\n### 3. That's it!, start using it 👌\n\n```javascript\nalert() {\n  this.notyfService.success(\"👻👻👻 It just works! 👻👻👻\");\n  this.notyfService.error(\"Something went wrong 😰😰😰\");\n}\n```\n\n# 🔨 Customizing 🔨\n\n### 1. Change the notification delay\n\n```javascript\n// The toast now lasts 8 seconds\nthis.notyfService.toastDelay = 8000;\n```\n\n### 2. Change the toast style\n\n```javascript\n// Change background and font color\nthis.notyfService.toastStyle = { 'background-color': 'purple', 'color': 'white' }; \n```\n\n### 3. Change the toast container style\n\n```javascript\n// Notification now displayed in the left corner\nthis.notyfService.toastContainerStyle = { 'left': '0' };\n```\n\n# 🤷 Troubleshooting 🤷\n\n### Internet Explorer support\n\nWe got you covered 😏 Ng-notyf uses the **[Web Animations API](https://w3c.github.io/web-animations/)** so you just have to install this package:\n\n`$ npm install web-animations-js --save` \n\nAnd add these to your `polyfills.ts` file:\n\n```\n/** IE9, IE10 and IE11 requires all of the following polyfills. **/\nimport 'core-js/es6/symbol';\nimport 'core-js/es6/object';\nimport 'core-js/es6/function';\nimport 'core-js/es6/parse-int';\nimport 'core-js/es6/parse-float';\nimport 'core-js/es6/number';\nimport 'core-js/es6/math';\nimport 'core-js/es6/string';\nimport 'core-js/es6/date';\nimport 'core-js/es6/array';\nimport 'core-js/es6/regexp';\nimport 'core-js/es6/map';\nimport 'core-js/es6/set';\n\n/** IE10 and IE11 requires the following to support `@angular/animation`. */\nimport 'web-animations-js';\n```\n\n# License\n\nMIT © [Juan Herrera](https://github.com/jdjuan) and [Carlos Roso](https://github.com/caroso1222)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdjuan%2Fng-notyf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdjuan%2Fng-notyf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdjuan%2Fng-notyf/lists"}