Ember CLI Notifications

9.1.0 · active · verified Wed Apr 22

Ember CLI Notifications is an Ember addon that provides Atom-inspired, transient notification messages for Ember applications. It enables developers to display various types of in-app alerts such as success, error, warning, and info messages, typically appearing at the top of the screen. The current stable version is 9.1.0, released in January 2025. This package generally follows a release cadence tied to Ember.js and Ember CLI updates, with major versions often introducing breaking changes to keep pace with the evolving Ember ecosystem, typically every 1-2 years. Key differentiators include its focus on a simple, injectable service for managing notifications, allowing programmatic control over message display, and offering customizable styling options. It integrates seamlessly into modern Ember applications, supporting Embroider and ember-auto-import v2.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'success') (or similar for other notification types)
```
cause The `notifications` service has not been correctly injected or is not available in the current context.

fix Ensure `import { inject as service } from '@ember/service';` is present and `@service notifications;` is used on the class property where you intend to use the service.
```
Error: Could not find module `ember-cli-notifications/config/environment`
```
cause This usually indicates an issue with `ember-cli-notifications` not being correctly linked or built, or a cached `node_modules` issue.

fix Run `ember install ember-cli-notifications` again. If that doesn't work, try clearing your `node_modules` and `tmp` directories (`rm -rf node_modules tmp && npm install`) and then rebuilding.
```
DEPRECATION: Using the {{equals}} helper is deprecated.
```
cause The `equals` helper was removed in v8.0.0. Your application or a dependency is still using it.

fix Refactor your templates to use standard Ember template helpers for comparison (e.g., `{{if (eq this.value 'some-string')}}`) or update your dependencies.

Warnings

breaking Version 9.0.0 transitioned to an Ember v2 addon format and dropped support for Ember.js versions older than 3.16.
Fix: Ensure your Ember application is running Ember.js 3.16 or higher and is compatible with Ember v2 addons. You may need to update your `ember-cli-build.js` or `package.json` configurations.
breaking Version 8.0.0 replaced overridable icon *paths* with overridable icon *components*, removed the obsolete `equals` helper, and dropped support for Node.js 10.
Fix: Migrate your icon customization to use component-based overrides. Remove any usage of the `equals` helper and upgrade your Node.js environment to a supported version (Node.js 12+).
breaking Version 7.0.0 dropped support for Node.js 8, Ember.js 2.18, and Ember.js 3.4.
Fix: Upgrade your Node.js environment and Ember.js application to supported versions (Node.js 10+, Ember.js 3.8+).
breaking Version 5.0.0 introduced significant changes including the removal of Font Awesome as a default dependency, renaming the notifications service to simply `notifications`, and removing CSS Modules.
Fix: Remove `ember-cli-notifications` related Font Awesome configuration. Update all service injections to use `@service notifications;`. Refactor any CSS overrides that relied on CSS Modules to use standard CSS practices.
gotcha Notifications are transient by default. If `autoClear` is true, they will disappear after `clearDuration`. Set `autoClear: false` or `clearDuration: 0` for persistent notifications.
Fix: When creating a notification, pass `autoClear: false` in the options object to make it persistent, or set `clearDuration: 0` to prevent automatic clearing regardless of `autoClear`.

Install

npm install ember-cli-notifications npm
yarn add ember-cli-notifications yarn
pnpm add ember-cli-notifications pnpm

Imports

service
wrong:
```
import service from '@ember/service';
```
correct:
```
import { inject as service } from '@ember/service';
```
Used to inject the notifications service into Ember components, controllers, or routes. Requires the `inject as service` alias.
notifications
wrong:
```
@service notification;
```
correct:
```
@service notifications;
```
The name of the injected service. Changed to `notifications` in v5.0.0 from an earlier, potentially singular, name.
NotificationsService
```
import NotificationsService from 'ember-cli-notifications/services/notifications';
```
While direct import of the service class is possible for advanced scenarios or testing, it's generally discouraged in favor of service injection via `@service`.

Quickstart

Demonstrates how to inject the `notifications` service into an Ember controller and use it to display various types of notifications (success, error, info) with custom options, as well as clearing them.

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @service notifications;

  @action
  showSuccessNotification() {
    this.notifications.success('Operation successful!', {
      autoClear: true,
      clearDuration: 3000,
      cssClasses: 'custom-success-class',
      htmlContent: '<b>Successfully</b> completed action.'
    });
  }

  @action
  showErrorNotification() {
    this.notifications.error('Something went wrong.', {
      autoClear: false,
      cssClasses: 'custom-error-class'
    });
  }

  @action
  showPersistentInfo() {
    this.notifications.info('This is an informational message.', {
      autoClear: false,
      clearDuration: 0 // Will stay until manually cleared
    });
  }

  @action
  clearAllNotifications() {
    this.notifications.clearAll();
  }
}

view raw JSON →