ember-service-helper

Simple template helper to inject services into templates.

Installation

ember install ember-service-helper

Usage

There are two ways to invoke the {{service}} helper.

• {{service serviceName}} — Returns the service itself. Like calling owner.lookup(`service:${serviceName}`)
• {{service serviceName methodName}} — Returns the method, bound to the instance.

Properties

Getting Properties

Example using the built-in {{get}} helper and ember-responsive. Note that {{get}} returns a bound reference.

{{#if (get (service "breakpoints") "isDesktop")}}
  Desktop breakpoint
{{else}}
  Mobile breakpoint
{{/if}}

Setting Properties

Example using ember-set-helper.

<ColorPicker @update={{set (service "preferences") "favoriteColor"}}>

Methods

Example using the {{pick}} helper from ember-composable-helpers to get the event.target.checked property.

<label>
  Enable dark mode
  <input
    type="checkbox"
    checked={{get (service "theme") "isDark"}}
    {{on "input" (pick "target.checked" (service "theme" "toggleDarkMode"))}}
  >
</label>

export default class ThemeService extends Service {
  @tracked isDark = false;

  toggleDarkMode(newValue = !this.isDark) {
    // Even though this method isn't using `@action`, the `{{service}}` helper
    // binds it to the service instance.
    this.isDark = newValue;
  }
}

Related

• Pre-RFC 543: Ability to inject service into Template Only component