System-wide config

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';

export default EmberPowerSelect.extend({
  // Place here your system-wide preferences
  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.
  i18n: Ember.inject.service(),
  loadingMessage: Ember.computed('i18n.locale', function() {
    return this.get('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.