Gmail Style Notifications in Ember

Here is a simple way to add gmail-style notifications in an ember app.  First start by adding an outlet in the application.hbs template file.

Next we create a notification mixin that we can add to any route that requires to use it.  You can just use ember cli to generate it with

Add the following code to the mixin

That code simply renders the notification template into the outlet and then destroys it after the specified delay.  We can now start using this mixin in any route by simply importing it like so:

Now in our template we can add a button to trigger an action to test the notification

And in our controller action, we will go ahead and send the notification up to the route which imported the implementation from the mixin.

And don’t forget to generate the notification template and controller.  The controller doesn’t have any code but it is required.  Just run these two commands in the terminal

The template that is used to display the actual notification is pretty straight forward:

And here is the css to make it look like gmail (or at least close enough):

Get the source at https://github.com/surgeforward/ember-gmail-notification and here is a demo https://ember-notification.firebaseapp.com/