International

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  intl: Ember.inject.service(),
  currency: Ember.inject.service(),
  appName: 'Ember Twiddle',
  price: '',
  actions: {
  	savePrice() {
    	console.log(this.get('price').replace(',', '.')); 
    },
    changeLocale() {
    	this.get('intl').setLocale(['fr-fr', 'en-us']);
    }
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  intl: Ember.inject.service(),
  currency: Ember.inject.service(),
  beforeModel() {
    this.set('currency.currency', 'USD');
  	return this.get('intl').setLocale(['en-us', 'en-us']);
  },
  setupController(controller, model) {
    this._super(controller, model);
    
    console.log('Template Price: ' + this.get('currency.templatePrice'));
    console.log('Seperator: ' + this.get('currency.separator'));
    console.log('Cent Seperator: ' + this.get('currency.radix'));
    console.log('Decimal Count: ' + this.get('currency.decimal'));
    console.log('Prefix: ' + this.get('currency.prefix'));
    console.log('Suffix: ' + this.get('currency.suffix'));
    
    controller.set('price', '3344.00');
  }
});

services.currency.js

import Ember from 'ember';

export default Ember.Service.extend({
  intl: Ember.inject.service(),
  locale: Ember.computed.readOnly('intl.locale'),
  prefix: Ember.computed('templatePrice', function() {
  	return this.get('currencySymbolInFront') ? `${this.get('currencySymbol')} ` : '';
  }),
  suffix: Ember.computed('templatePrice', function() {
  	return this.get('currencySymbolInFront') ? '' : ` ${this.get('currencySymbol')}`;
  }),
  radix: Ember.computed('templatePrice', function() {
  	return this.get('templatePrice').split('4')[1].charAt(0)
  }),
  decimal: Ember.computed('templatePrice', function() {
  	if (this.get('currencySymbolInFront'))
      return this.get('templatePrice').split('4')[1].substring(1).length;
    else
      return this.get('templatePrice').split('4')[1].substring(1).toString().split(/\s+/)[0].length;
  }),
  separator: Ember.computed('templatePrice', function() {
  	if (this.get('currencySymbolInFront'))
      return this.get('templatePrice').split('1')[1].charAt(0);
    else
      return this.get('templatePrice').charAt(1);
  }),
  currency: '',
  currencySymbol: Ember.computed('currencySymbolInFront', function() {
  	if(this.get('currencySymbolInFront'))
      return this.get('templatePrice').split('1')[0].trim();
    else
      return this.get('templatePrice').split('5')[1];
  }),
  currencySymbolInFront: Ember.computed('templatePrice', function() {
  	return isNaN(this.get('templatePrice').charAt(0));
  }),
  templatePrice: Ember.computed('locale', 'currency', function() {
    return this.get('intl').formatNumber('1234.0500', {
      currency: this.get('currency') || 'USD',
      format: this.get('currency') || 'USD',
      style: 'currency'
    });
  })
});

styles.app.css

body {
	padding: 30px;
}

.col-xs-12 {
	width: 100%;
}

.locale {
	margin-top: 40px;
}

.btn {
  margin-top: 10px;
	margin-right: 15px;
}

templates.application.hbs

<div class="container-fluid">
	<div class="row">
  	<div class="col-xs-12">
  		<div class="form-group">
    		<label for="exampleInputEmail1">Enter price: </label>
        {{number-input
        	class="form-control"
          placeholder="Enter Service Price"
        	unmaskedValue=price
          group=true 
          groupSize=3
          separator=currency.separator
          decimal=currency.decimal 
          radix=currency.radix
          prefix=currency.prefix
          suffix=currency.suffix
          digitsOptional=false
        }}
    		<small id="emailHelp" class="form-text text-muted">Set the price for your service.</small>
  		</div>
      <button type="submit" class="btn btn-primary" {{action "savePrice"}}>Save</button>
      <button class="btn btn-danger" {{action "changeLocale"}}>Change Locale to fr-fr</button>
  	</div>
  </div>
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0",
    "bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css",
    "bootstrap-popper": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js",
    "bootstrap-js": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-i18n": "5.0.1",
    "ember-intl": "2.23.1",
    "ember-inputmask": "0.4.0-beta.5"
  }
}