{"id":15280532,"url":"https://github.com/lazycuh/angular-notification","last_synced_at":"2025-04-02T00:43:10.323Z","repository":{"id":207909776,"uuid":"717640272","full_name":"lazycuh/angular-notification","owner":"lazycuh","description":"A singleton, global Angular service to programmatically show notifications","archived":false,"fork":false,"pushed_at":"2024-12-07T23:55:39.000Z","size":6708,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-19T16:52:23.287Z","etag":null,"topics":["angular","angular-notification","angular-notification-component","angular-notification-service","notification-component","notification-service","notification-ui"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@lazycuh/angular-notification","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/lazycuh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2023-11-12T04:33:06.000Z","updated_at":"2024-12-07T23:55:42.000Z","dependencies_parsed_at":"2023-12-19T07:27:26.510Z","dependency_job_id":"25356c79-bf6a-46fe-95b2-d59a1598ada1","html_url":"https://github.com/lazycuh/angular-notification","commit_stats":null,"previous_names":["babybeet/angular-notification","lazycuh/angular-notification"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazycuh%2Fangular-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazycuh%2Fangular-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazycuh%2Fangular-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazycuh%2Fangular-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lazycuh","download_url":"https://codeload.github.com/lazycuh/angular-notification/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246735350,"owners_count":20825223,"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","angular-notification","angular-notification-component","angular-notification-service","notification-component","notification-service","notification-ui"],"created_at":"2024-09-30T12:01:40.766Z","updated_at":"2025-04-02T00:43:10.298Z","avatar_url":"https://github.com/lazycuh.png","language":"TypeScript","readme":"# angular-notification [![](https://circleci.com/gh/lazycuh/angular-notification.svg?style=svg\u0026logo=appveyor)](https://app.circleci.com/pipelines/github/lazycuh/angular-notification?branch=main)\n\nA singleton, global Angular service to programmatically render notifications.\n\n## Table of contents\n\n\u003c!-- toc --\u003e\n\n- [Angular compatibility](#angular-compatibility)\n- [Installation](#installation)\n- [Available APIs](#available-apis)\n  - [`NotificationService`](#notificationservice)\n  - [`NotificationConfiguration`](#notificationconfiguration)\n  - [`Theme`](#theme)\n- [Example Usage](#example-usage)\n  - [Code example](#code-example)\n  - [Result](#result)\n\n\u003c!-- tocstop --\u003e\n\n## Angular compatibility\n\n| This library | Angular |\n| ------------ | ------- |\n| 2.x.x        | 19.x.x  |\n| 1.x.x        | 16 - 18 |\n\n## Installation\n\n- `npm`\n  ```\n  npm i -S @lazycuh/angular-notification\n  ```\n- `pnpm`\n  ```\n  pnpm i -S @lazycuh/angular-notification\n  ```\n- `yarn`\n  ```\n  yarn add @lazycuh/angular-notification\n  ```\n\n## Available APIs\n\nThese are the symbols that are available from this package\n\n### `NotificationService`\n\nA singleton Angular service to programmatically show notifications.\n\n```ts\nclass NotificationService {\n  /**\n   * The number of milliseconds after which the notification is closed.\n   */\n  static readonly DEFAULT_AUTO_CLOSE_MS = 30000;\n\n  /**\n   * Set the number of milliseconds to be applied globally to all notifications created\n   * in the future after which they are automatically closed.\n   */\n  static setGlobalAutoCloseMs(autoCloseMs: number): void;\n\n  /**\n   * Set the default theme that will be used for all notifications created in the future.\n   *\n   * @param theme The new theme to be used as the default.\n   */\n  static setDefaultTheme(theme: Theme): void;\n\n  /**\n   * Set the default label for the close button. Default is `Close`.\n   */\n  static setDefaultCloseButtonLabel(label: string): void;\n\n  /**\n   * Open a notification using the provided configuration. The opened notification\n   * will be closed automatically after 10 seconds by default.\n   *\n   * @param notificationConfiguration The notification configuration object.\n   */\n  open(notificationConfiguration: NotificationConfiguration): void;\n}\n```\n\n### `NotificationConfiguration`\n\nThe configuration object for the notification to be created.\n\n```ts\ninterface NotificationConfiguration {\n  /**\n   * The optional number of milliseconds after which the notification is closed. Default is 30 seconds.\n   */\n  autoCloseMs?: number;\n\n  /**\n   * Whether to bypass Angular's default sanitization rules for HTML content (such as removing inline style).\n   * Default is `false`.\n   */\n  bypassHtmlSanitization?: boolean;\n\n  /**\n   * The optional class name to add for this notification.\n   */\n  className?: string;\n\n  /**\n   * The optional label for the notification's close button. Default is `Close`.\n   */\n  closeButtonLabel?: string;\n\n  /**\n   * The required notification content to show. HTML is supported.\n   *\n   * If the HTML content contains inline style, it will be stripped out by Angular's default sanitization step,\n   * to bypass this behavior, pass `true` to `bypassHtmlSanitization` option.\n   */\n  content: string;\n\n  /**\n   * The optional theme for the floating box. Default is `light`.\n   */\n  theme?: Theme;\n}\n```\n\n### `Theme`\n\n```ts\ntype Theme = 'dark' | 'light';\n```\n\n\u003cbr/\u003e\n\n## Example Usage\n\n### Code example\n\n```typescript\n// Import the service into your class to start using it\nimport { NotificationService } from '@lazycuh/angular-notification';\n\n@Component({\n  selector: 'test-component',\n  template: `\n    \u003cbutton\n      type=\"button\"\n      (click)=\"showNotification()\"\u003e\n      Click me\n    \u003c/button\u003e\n  `\n})\nexport class TestComponent {\n  constructor(private readonly notificationService: NotificationService) {}\n\n  showNotification() {\n    this.notificationService.open({\n      content: 'This notification is very \u003cstrong\u003eimportant\u003c/strong\u003e'\n    });\n  }\n}\n```\n\n### Result\n\n| Theme |                                                                                |\n| ----- | ------------------------------------------------------------------------------ |\n| Light | ![Example for notification with light theme](./docs/example-1-light-theme.gif) |\n| Dark  | ![Example for notification with dark theme](./docs/example-2-dark-theme.gif)   |\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Notifications"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flazycuh%2Fangular-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flazycuh%2Fangular-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flazycuh%2Fangular-notification/lists"}