How pass value declared in application controller to component

Question

In my application controller, i have the following:

export default Ember.Controller.extend({
  isOpen: true,

  actions: {
    toggleSidebar () {
      this.toggleProperty('isOpen');
    }
  }
});

And i would like to pass the isOpen to a component that is being called from other templates (not application.hbs), like:

{{#main-main isOpen=isOpen}}
{{/main-main}}

because inside the component i have:

export default Ember.Component.extend({
    tagName: 'main',
    classNames: ['main'],
    classNameBindings: ['isOpen:main--active'],
});

I was thinking that should work just like this.. but it doesn't.

What could i do to pass the property isOpen to the component main-main?

Thank you guys!

Answer 1

In every template (templates/example.hbs) where you want to pass isOpen property to component you have to declare isOpen property in controller associated with that template (controllers/example.js).

You can achieve this by using dependency injection in controllers/example.js:

application: Ember.inject.controller(),
isOpen: Ember.computed.alias('application.isOpen')