Global Notification Using Ember Initializer and Service

When developing Ember app, you may want to have a singleton to handle global state such as global notification, or error handling. This doesn’t fall into Route, Controller, or Component. Ember offers an easy way to manage this using Service and Initializers.

Create a service to hold notification data

import Ember from 'ember';

export default Ember.Service.extend({
    notification: null,
    init() {
        this.set('notification', null);

Create an initializer to inject global notification service in application

This allows us to use GlobalNotification service in route, and component.

import GlobalNotification from '../services/global-notification';

export function initialize(application) {
    application.register('globalNotification:main', GlobalNotification, {singleton: true});
    application.inject('component', 'GlobalNotification', 'service:global-notification');
    application.inject('route', 'GlobalNotification', 'service:global-notification');

export default {
    name: 'global-notification',

Using our global notification service.

Assuming you have a user settings form, and want to display notification when user changes settings.

import Ember from 'ember';
export default Ember.Component.extend({
    globalNotification: Ember.inject.service('global-notification'),
    actions: {
        saveSettings() {
            let accountInfo = this.getProperties("firstName", "lastName", "email", "password");
                url: "/api/user",
                type: "POST",
                data: JSON.stringify(accountInfo)
            }).then(function(response) {
                // We want to set notification data to global notification
               this.set("globalNotification.notification", "User settings

In the user setting forms, we can put {{GlobalNotification.notification}} where we want to display the notification.

<form id="user-settings">
    <p class="notification">{{GlobalNotification.notification}}</p>

That is it. Now you can call global-notification service anywhere in your application, and use its injection via initializers to display the data in your template.

More Articles

Full Stack Development with Ember and Golang

Webpack Starter - Use ES6 Today

Deploy Ember App on Github Pages

Meta Tags Generator

What Missing at Emberconf 2016

Rickshaw Chart Hovering Multiple Values

ES6 Review Part 2

ES6 Review Part 1

MenuOnScroll - jQuery Plugin

Create App With Meteor