ember-cli-flash is a robust Ember addon that provides a simple yet highly configurable solution for displaying flash messages (e.g., growl, toast notifications) within Ember applications. It includes both a `flashMessages` service for managing messages and a `FlashMessage` component for rendering them. Currently in stable version 7.0.0, the library generally follows a yearly major release cycle, with minor and patch updates in between, aligning with Ember's LTS and general release schedule. Key differentiators include its promise-aware API, out-of-the-box styling support for frameworks like Bootstrap and Foundation, and comprehensive TypeScript definitions allowing for custom message fields with generics, making it type-safe and adaptable to complex notification requirements. It integrates well with modern Ember tooling, requiring Ember.js v4.12 or above and Embroider or ember-auto-import v2.
npm install ember-cli-flashVerified import paths — ran on the pinned version, not inferred.
Demonstrates injecting the `flashMessages` service into an Ember Glimmer component and using its convenience methods (`.success`, `.danger`) to display messages with custom options, including promise-based handling and clearing all messages.
Explicitly inject the service: `import { service } from '@ember/service'; @service flashMessages;`. Update `flash-message` component usage to Glimmer component syntax (e.g., named arguments).Review custom logic interacting with `FlashMessagesService` or `FlashObject` instances and adapt to native class paradigms. For most users, direct usage of the service methods should remain compatible.
Ensure `@embroider/macros` is installed in your project (`npm install @embroider/macros`). For testing, refer to the addon's documentation for updated test helper usage instead of relying on blueprint-generated files.
Test message lifecycle and removal logic after upgrading to `v7.0.0` to ensure no unexpected behavior arises from the corrected `on*` property handling or immediate `removeBy()` execution.
Ensure your Ember application is compatible with Ember.js v4.12+ and uses `ember-auto-import v2` or Embroider. Update your `package.json` and install necessary dependencies.
Ensure you have `import { service } from '@ember/service';` and are using `@service declare flashMessages: FlashMessagesService;` (or `@service flashMessages;` for JS) in your component or controller class.Ensure the `<FlashMessage::Component />` is placed in a template where it can access the `flashMessages` service implicitly (e.g., `application.hbs`), and that you are adding messages via `this.flashMessages.add()` or its convenience methods.
When using custom fields like `onClose`, define a generic type parameter for `FlashMessagesService` and `FlashMessage` component, e.g., `type MyFlashOptions = { onClose?: () => void }; @service declare flashMessages: FlashMessagesService<MyFlashOptions>;`.