{"id":31782665,"url":"https://github.com/itsdevdom/angular-notifier","last_synced_at":"2025-12-24T20:02:22.232Z","repository":{"id":11206362,"uuid":"68753913","full_name":"itsdevdom/angular-notifier","owner":"itsdevdom","description":"A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular application.","archived":false,"fork":false,"pushed_at":"2024-02-08T17:37:50.000Z","size":4515,"stargazers_count":245,"open_issues_count":39,"forks_count":70,"subscribers_count":6,"default_branch":"develop","last_synced_at":"2025-11-23T04:04:15.869Z","etag":null,"topics":["angular","angular-component","angular2","angular4","notifications","notifier","toast"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/angular-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/itsdevdom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-09-20T21:13:36.000Z","updated_at":"2025-11-17T03:36:34.000Z","dependencies_parsed_at":"2024-01-11T00:01:47.861Z","dependency_job_id":"f61df157-8242-412e-a0d3-3e39c50f4390","html_url":"https://github.com/itsdevdom/angular-notifier","commit_stats":{"total_commits":107,"total_committers":9,"mean_commits":11.88888888888889,"dds":"0.23364485981308414","last_synced_commit":"b60689b053c3ee70b95a4af3d625800401308565"},"previous_names":["dominique-mueller/angular-notifier"],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/itsdevdom/angular-notifier","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fangular-notifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fangular-notifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fangular-notifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fangular-notifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsdevdom","download_url":"https://codeload.github.com/itsdevdom/angular-notifier/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fangular-notifier/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28007455,"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","status":"online","status_checked_at":"2025-12-24T02:00:07.193Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-component","angular2","angular4","notifications","notifier","toast"],"created_at":"2025-10-10T09:35:00.637Z","updated_at":"2025-12-24T20:02:22.225Z","avatar_url":"https://github.com/itsdevdom.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\r\n\r\n# angular-notifier\r\n\r\n**A well designed, fully animated, highly customizable, and easy-to-use notification library for your **Angular 2+** application.**\r\n\r\n\u003c/div\u003e\r\n\r\n\u003cbr\u003e\u003cbr\u003e\r\n\r\n## Demo\r\n\r\nYou can play around with this library with **[this Stackblitz right here](https://stackblitz.com/edit/angular-notifier-demo)**.\r\n\r\n![Angular Notifier Animated Preview GIF](/docs/angular-notifier-preview.gif?raw=true)\r\n\r\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\r\n\r\n## How to install\r\n\r\nYou can get **angular-notifier** via **npm** by either adding it as a new _dependency_ to your `package.json` file and running npm install,\r\nor running the following command:\r\n\r\n```bash\r\nnpm install angular-notifier\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n### Angular versions\r\n\r\nThe following list describes the compatibility with Angular:\r\n\r\n| Angular Notifier | Angular | Compilation        |\r\n| ---------------- | ------- | ------------------ |\r\n| `1.x`            | `2.x`   | View Engine        |\r\n| `2.x`            | `4.x`   | View Engine        |\r\n| `3.x`            | `5.x`   | View Engine        |\r\n| `4.x`            | `6.x`   | View Engine        |\r\n| `5.x`            | `7.x`   | View Engine        |\r\n| `6.x`            | `8.x`   | View Engine        |\r\n| `7.x`            | `9.x`   | View Engine        |\r\n| `8.x`            | `10.x`  | View Engine        |\r\n| `9.x`            | `11.x`  | View Engine        |\r\n| `10.x`           | `12.x`  | View Engine        |\r\n| `11.x`           | `13.x`  | Ivy (partial mode) |\r\n| `12.x`           | `14.x`  | Ivy (partial mode) |\r\n| `13.x`           | `15.x`  | Ivy (partial mode) |\r\n| `14.x`           | `16.x`  | Ivy (partial mode) |\r\n\r\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\r\n\r\n## How to setup\r\n\r\nBefore actually being able to use the **angular-notifier** library within our code, we have to first set it up within Angular, and also\r\nbring the styles into our project.\r\n\r\n\u003cbr\u003e\r\n\r\n### 1. Import the `NotifierModule`\r\n\r\nFirst of all, make **angular-notifier** globally available to your Angular application by importing (and optionally also configuring) the\r\n`NotifierModule` the your root Angular module. For example:\r\n\r\n```typescript\r\nimport { NotifierModule } from 'angular-notifier';\r\n\r\n@NgModule({\r\n  imports: [NotifierModule],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\nBut wait -- your probably might want to customize your notifications' look and behaviour according to your requirements and needs. To do so,\r\ncall the `withConfig` method on the `NotifierModule`, and pass in the options. For example:\r\n\r\n```typescript\r\nimport { NotifierModule } from 'angular-notifier';\r\n\r\n@NgModule({\r\n  imports: [\r\n    NotifierModule.withConfig({\r\n      // Custom options in here\r\n    }),\r\n  ],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n### 2. Use the `notifier-container` component\r\n\r\nIn addition, you have to place the `notifier-container` component somewhere in your application, best at the last element of your\r\nroot (app) component. For example:\r\n\r\n```typescript\r\n@Component({\r\n  selector: 'my-app',\r\n  template: `\r\n    \u003ch1\u003eHello World\u003c/h1\u003e\r\n    \u003cnotifier-container\u003e\u003c/notifier-container\u003e\r\n  `,\r\n})\r\nexport class AppComponent {}\r\n```\r\n\r\n\u003e Later on, this component will contain and manage all your applications' notifications.\r\n\r\n\u003cbr\u003e\r\n\r\n### 3. Import the styles\r\n\r\nOf course we also need to import the **angular-notifier** styles into our application. Depending on the architecture of your Angular\r\napplication, you want to either import the original SASS files, or the already compiled CSS files instead - or none of them if you wish to\r\nwrite your own styles from scratch.\r\n\r\n#### The easy way: Import all the styles\r\n\r\nTo import all the styles, simple include either the `~/angular-notifier/styles.(scss|css)` file. It contains the core styles as well as all\r\nthe themes and notification types.\r\n\r\n#### The advanced way: Only import the styles actually needed\r\n\r\nTo keep the size if your styles as small as possible (improving performance for the perfect UX), your might instead decide to only import\r\nthe styles actually needed by our application. The **angular-notifier** styles are modular:\r\n\r\n- The `~/angular-notifier/styles/core.(scss|css)` file is always required, it defines the basic styles (such as the layout)\r\n- Themes can be imported from the `~/angular-notifier/styles/theme` folder\r\n- The different notification types, then, can be imported from the `~/angular-notifier/styles/types` folder\r\n\r\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\r\n\r\n## How to use\r\n\r\nUsing **angular-notifier** is as simple as it can get -- simple import and inject the `NotifierService` into every component (directive,\r\nservice, ...) you want to use in. For example:\r\n\r\n```typescript\r\nimport { NotifierService } from 'angular-notifier';\r\n\r\n@Component({\r\n  // ...\r\n})\r\nexport class MyAwesomeComponent {\r\n  private readonly notifier: NotifierService;\r\n\r\n  constructor(notifierService: NotifierService) {\r\n    this.notifier = notifierService;\r\n  }\r\n}\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n### Show notifications\r\n\r\nShowing a notification is simple - all your need is a type, and a message to be displayed. For example:\r\n\r\n```typescript\r\nthis.notifier.notify('success', 'You are awesome! I mean it!');\r\n```\r\n\r\nYou can further pass in a _notification ID_ as the third (optional) argument. Essentially, such a _notification ID_ is nothing more but a\r\nunique string tha can be used later on to gain access (and thus control) to this specific notification. For example:\r\n\r\n```typescript\r\nthis.notifier.notify('success', 'You are awesome! I mean it!', 'THAT_NOTIFICATION_ID');\r\n```\r\n\r\n\u003e For example, you might want to define a _notification ID_ if you know that, at some point in the future, you will need to remove _this\r\n\u003e exact_ notification.\r\n\r\n**The syntax above is actually just a shorthand version of the following:**\r\n\r\n```typescript\r\nthis.notifier.show({\r\n  type: 'success',\r\n  message: 'You are awesome! I mean it!',\r\n  id: 'THAT_NOTIFICATION_ID', // Again, this is optional\r\n});\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n### Hide notifications\r\n\r\nYou can also hide notifications. To hide a specific notification - assuming you've defined a _notification ID_ when creating it, simply\r\ncall:\r\n\r\n```typescript\r\nthis.notifier.hide('THAT_NOTIFICATION_ID');\r\n```\r\n\r\nFurthermore, your can hide the newest notification by calling:\r\n\r\n```typescript\r\nthis.notifier.hideNewest();\r\n```\r\n\r\nOr, your could hide the oldest notification:\r\n\r\n```typescript\r\nthis.notifier.hideOldest();\r\n```\r\n\r\nAnd, of course, it's also possible to hide all visible notifications at once:\r\n\r\n```typescript\r\nthis.notifier.hideAll();\r\n```\r\n\r\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\r\n\r\n## How to customize\r\n\r\nFrom the beginning, the **angular-notifier** library has been written with customizability in mind. The idea is that **angular-notifier**\r\nworks the way your want it to, so that you can make it blend perfectly into the rest of your application. Still, the default configuration\r\nshould already provide a great User Experience.\r\n\r\n\u003e Keep in mind that **angular-notifier** can be configured only once - which is at the time you import the `NotifierModule` into your root\r\n\u003e (app) module.\r\n\r\n\u003cbr\u003e\r\n\r\n### Position\r\n\r\nWith the `position` property you can define where exactly notifications will appear on the screen:\r\n\r\n```typescript\r\nposition: {\r\n\r\n  horizontal: {\r\n\r\n    /**\r\n     * Defines the horizontal position on the screen\r\n     * @type {'left' | 'middle' | 'right'}\r\n     */\r\n    position: 'left',\r\n\r\n    /**\r\n     * Defines the horizontal distance to the screen edge (in px)\r\n     * @type {number}\r\n     */\r\n    distance: 12\r\n\r\n  },\r\n\r\n  vertical: {\r\n\r\n    /**\r\n     * Defines the vertical position on the screen\r\n     * @type {'top' | 'bottom'}\r\n     */\r\n    position: 'bottom',\r\n\r\n    /**\r\n     * Defines the vertical distance to the screen edge (in px)\r\n     * @type {number}\r\n     */\r\n    distance: 12\r\n\r\n    /**\r\n     * Defines the vertical gap, existing between multiple notifications (in px)\r\n     * @type {number}\r\n     */\r\n    gap: 10\r\n\r\n  }\r\n\r\n}\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n### Theme\r\n\r\nWith the `theme` property you can change the overall look and feel of your notifications:\r\n\r\n```typescript\r\n/**\r\n * Defines the notification theme, responsible for the Visual Design of notifications\r\n * @type {string}\r\n */\r\ntheme: 'material';\r\n```\r\n\r\n#### Theming in detail\r\n\r\nWell, how does theming actually work? In the end, the value set for the `theme` property will be part of a class added to each notification\r\nwhen being created. For example, using `material` as the theme results in all notifications getting a class assigned named `x-notifier__notification--material`.\r\n\r\n\u003e Everyone - yes, I'm looking at you - can use this mechanism to write custom notification themes and apply them via the `theme` property.\r\n\u003e For example on how to create a theme from scratch, just take a look at the themes coming along with this library (as for now only the\r\n\u003e `material` theme).\r\n\r\n\u003cbr\u003e\r\n\r\n### Behaviour\r\n\r\nWith the `behaviour` property you can define how notifications will behave in different situations:\r\n\r\n```typescript\r\nbehaviour: {\r\n\r\n  /**\r\n   * Defines whether each notification will hide itself automatically after a timeout passes\r\n   * @type {number | false}\r\n   */\r\n  autoHide: 5000,\r\n\r\n  /**\r\n   * Defines what happens when someone clicks on a notification\r\n   * @type {'hide' | false}\r\n   */\r\n  onClick: false,\r\n\r\n  /**\r\n   * Defines what happens when someone hovers over a notification\r\n   * @type {'pauseAutoHide' | 'resetAutoHide' | false}\r\n   */\r\n  onMouseover: 'pauseAutoHide',\r\n\r\n  /**\r\n   * Defines whether the dismiss button is visible or not\r\n   * @type {boolean}\r\n   */\r\n  showDismissButton: true,\r\n\r\n  /**\r\n   * Defines whether multiple notification will be stacked, and how high the stack limit is\r\n   * @type {number | false}\r\n   */\r\n  stacking: 4\r\n\r\n}\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n### Custom Templates\r\n\r\nIf you need more control over how the inner HTML part of the notification looks like, either because your style-guide requires it, or for being able to add icons etc, then you can **define a custom `\u003cng-template\u003e`** which you pass to the `NotifierService`.\r\n\r\nYou can define a custom `ng-template` as follows:\r\n\r\n```html\r\n\u003cng-template #customNotification let-notificationData=\"notification\"\u003e\r\n  \u003cmy-custom-alert type=\"notificationData.type\"\u003e {{ notificationData.message }} \u003c/my-custom-alert\u003e\r\n\u003c/ng-template\u003e\r\n```\r\n\r\nIn this case you could wrap your own HTML, even a `\u003cmy-custom-alert\u003e` component which you might use in your application. The notification data is passed in as a `notification` object, which you can reference inside the `\u003cng-template\u003e` using the `let-` syntax.\r\n\r\nInside your component, you can then reference the `\u003cng-template\u003e` by its template variable `#customNotification` using Angular's `ViewChild`:\r\n\r\n```typescript\r\nimport { ViewChild } from '@angular/core';\r\n\r\n@Component({\r\n  // ...\r\n})\r\nexport class SomeComponent {\r\n  @ViewChild('customNotification', { static: true }) customNotificationTmpl;\r\n\r\n  constructor(private notifierService: NotifierService) {}\r\n\r\n  showNotification() {\r\n    this.notifier.show({\r\n      message: 'Hi there!',\r\n      type: 'info',\r\n      template: this.customNotificationTmpl,\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n### Animations\r\n\r\nWith the `animations` property your can define whether and how exactly notification will be animated:\r\n\r\n```typescript\r\nanimations: {\r\n\r\n  /**\r\n   * Defines whether all (!) animations are enabled or disabled\r\n   * @type {boolean}\r\n   */\r\n  enabled: true,\r\n\r\n  show: {\r\n\r\n    /**\r\n     * Defines the animation preset that will be used to animate a new notification in\r\n     * @type {'fade' | 'slide'}\r\n     */\r\n    preset: 'slide',\r\n\r\n    /**\r\n     * Defines how long it will take to animate a new notification in (in ms)\r\n     * @type {number}\r\n     */\r\n    speed: 300,\r\n\r\n    /**\r\n     * Defines which easing method will be used when animating a new notification in\r\n     * @type {'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'}\r\n     */\r\n    easing: 'ease'\r\n\r\n  },\r\n\r\n  hide: {\r\n\r\n    /**\r\n     * Defines the animation preset that will be used to animate a new notification out\r\n     * @type {'fade' | 'slide'}\r\n     */\r\n    preset: 'fade',\r\n\r\n    /**\r\n     * Defines how long it will take to animate a new notification out (in ms)\r\n     * @type {number}\r\n     */\r\n    speed: 300,\r\n\r\n    /**\r\n     * Defines which easing method will be used when animating a new notification out\r\n     * @type {'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'}\r\n     */\r\n    easing: 'ease',\r\n\r\n    /**\r\n     * Defines the animation offset used when hiding multiple notifications at once (in ms)\r\n     * @type {number | false}\r\n     */\r\n    offset: 50\r\n\r\n  },\r\n\r\n  shift: {\r\n\r\n    /**\r\n     * Defines how long it will take to shift a notification around (in ms)\r\n     * @type {number}\r\n     */\r\n    speed: 300,\r\n\r\n    /**\r\n     * Defines which easing method will be used when shifting a notification around\r\n     * @type {string}\r\n     */\r\n    easing: 'ease' // All standard CSS easing methods work\r\n\r\n  },\r\n\r\n  /**\r\n   * Defines the overall animation overlap, allowing for much smoother looking animations (in ms)\r\n   * @type {number | false}\r\n   */\r\n  overlap: 150\r\n\r\n}\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n### In short -- the default configuration\r\n\r\nTo sum it up, the following is the default configuration _(copy-paste-friendly)_:\r\n\r\n```typescript\r\nconst notifierDefaultOptions: NotifierOptions = {\r\n  position: {\r\n    horizontal: {\r\n      position: 'left',\r\n      distance: 12,\r\n    },\r\n    vertical: {\r\n      position: 'bottom',\r\n      distance: 12,\r\n      gap: 10,\r\n    },\r\n  },\r\n  theme: 'material',\r\n  behaviour: {\r\n    autoHide: 5000,\r\n    onClick: false,\r\n    onMouseover: 'pauseAutoHide',\r\n    showDismissButton: true,\r\n    stacking: 4,\r\n  },\r\n  animations: {\r\n    enabled: true,\r\n    show: {\r\n      preset: 'slide',\r\n      speed: 300,\r\n      easing: 'ease',\r\n    },\r\n    hide: {\r\n      preset: 'fade',\r\n      speed: 300,\r\n      easing: 'ease',\r\n      offset: 50,\r\n    },\r\n    shift: {\r\n      speed: 300,\r\n      easing: 'ease',\r\n    },\r\n    overlap: 150,\r\n  },\r\n};\r\n```\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdevdom%2Fangular-notifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsdevdom%2Fangular-notifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdevdom%2Fangular-notifier/lists"}