Toggle component enabled/disabled using service


I found this example in the forum and I have attempted to use it in my code below

//Example found

hbs ```{{modal-filter feature=feature property=someProperty}}``



Generally, when you need to share state between different layers of an Ember application, the tool for the job is to create a service. Here for instance, you could imagine having a panel service, maybe something like this:

// app/services/panels.js
```export default Ember.Service.extend({
    mainPanelShown: false,

    setPanel: function (name, visible) {
        set(this, name + 'PanelShown', visible);

You can then use it from anywhere:

// If you need to know whether to show the panel/the panel is shown
```export default Ember.Controller.exend({
    panels: Ember.inject.service(),
    isPanelShown: Ember.computed.readOnly('panels.mainPanelShown')

If you need to trigger it:

```export default Ember.Controller.extend({
    panels: Ember.inject.service(),
    actions: {
        showTheMainPanel: function () {
            get(this, 'panels').setPanel('main', true);

Granted, this is definitely not polished, but you get the idea. The point is to have the service be the central interface for triggering panels and getting their state.

//My version

// Component hbs

  <select {{action 'selectTagType' on='change' }} register-as=countryComponent id=tag-type-select disabled={{citySelectDisabled}}>
    {{#each cityProp as |elem|}}
      <option value="{{}}" selected={{eq}}>{{}} {{elem.currency_id}}</option>

// Component JS
```import Ember from 'ember';

export default Ember.Component.extend({

  store: Ember.inject.service(),
  selects: Ember.inject.service(),

  cityProp: Ember.computed({
      get() {
        // Since we are using Ember.inject.service, we need to call the store using the get helper
          return this.get('store').findAll('country');

  didInsertElement: function() {
      this.set('register-as', this);

  actions: {
    selectTagType() {

      const selectedEl = this.$('#tag-type-select')[0];

      const selectedIndex = selectedEl.selectedIndex;

        const options = this.$('#tag-type-select option');

        const selectedValue = options(selectedIndex).value;

      enableCitySelect() {
          get(this, 'selects').setSelect('city', true);



// Service
```import Ember from 'ember';

export default Ember.Service.extend({

  citySelectDisabled: true,

  setSelect: function (name, visible) {
      set(this, name + 'SelectDisabled', false);


The service is not setting the attribute to true to enable the component to be rendered as disabled