Component hooks at the route level

Use this templateless component to simulate component UI hooks for route-level templates.


Route-level controllers and templates don't have useful Component hooks like didInsertElement and willDestroyElement.

You can create a component that calls functions on each of its lifecycle hooks, and use it to wire up Controller actions to these events.

// components/ui-hooks/component.js
import Ember from 'ember';

export default Ember.Component.extend({

  tagName: '',

  'did-insert'() {},
  'will-destroy'() {},

  didInsertElement() {


  willDestroyElement() {



Now you can use this to invoke Controller actions when a route renders:

{{! home/template.hbs }}
  did-insert=(action 'activateKeyboard')
  will-destroy=(action 'deactivateKeyboard')}}

👋 Hey there, Ember dev!

We hope you enjoyed this free video 🙂

If you like it and want to keep learning with us, we've written a free 6-lesson email course about the fundamental patterns of modern component design in Ember.

To get the first lesson now, enter your best email address below:

You can also check out more details about the course by clicking here.


Send us a tweet:

Or ask us in Inside EmberMap, our private Slack workspace for subscribers.