System-wide config

So far we've seen that Ember Power Select can take a fair amount of configuration options on invocations to alter its default behavior.

But what happens when you want all your selects to behave on a certain way that is not the default one? Repeating the same options over and over on your templates is not pleasant and error prone.

If you want to apply a configuration option to all your selects there is no special way or key in the /config/environment.js you need to learn. Just use The Ember Way™.

Inside your app's /app/components folder create a ember-power-select.js file:

import EmberPowerSelect from 'ember-power-select/components/power-select';
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';

export default class extends EmberPowerSelect {
  @service i18n
  searchEnabled = false
  allowClear = true

  // You can even use computed properties to do other stuff, like apply i18n, that wouldn't be
  // possible with static configuration.
  get loadingMessage() {
    return this.i18n.t('selects.loading');

That's all. No new concepts to learn, just your usual ember-cli work flow.

In this example the component is also named {{ember-power-select}} but using this approach you can create many components with different names that extend and customize Ember Power Select in different ways. Pick and choose.