<p dir="auto">Simply add anywhere in template the following:</p>
<p dir="auto"><code class="notranslate">{{123456 | number}}</code><br>
or<br>
<code class="notranslate">{{123456 | number:'4.2-2'}}</code></p>
<p dir="auto">In desktop browsers (Firefox, Chrome, IE10) the value is correctly interpolated as:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="123,456"><pre class="notranslate"><code class="notranslate">123,456
</code></pre></div>
<p dir="auto">or</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="123,456.00"><pre class="notranslate"><code class="notranslate">123,456.00
</code></pre></div>
<p dir="auto">but on mobile browsers on iPad iOS 9.2.1 (Chrome 47, Safari, Firefox 2.0) it fails resulting in empty value.</p>
<p dir="auto">Running unit tests in non-Chrome browsers raised some doubts about this API which is currently used in the Date and Currency pipes.</p>
<p dir="auto">To start with, it is not supported in all Safari versions (desktop and mobile) and older browsers:<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl</a><br>
<a href="http://caniuse.com/#search=intl" rel="nofollow">http://caniuse.com/#search=intl</a></p>
<p dir="auto">Then, on browsers which support it, the result doesn't match what Chrome does.<br>
On Firefox, one of the test fires this 2 years old bug: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=866372" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=866372</a><br>
On IE11, most tests are failing due to discrepancies in output (formatting, white space, special chars,etc).</p>
<p dir="auto">At the end of the day, it seems only reliable in Chrome, but it is also difficult to polyfill.<br>
So, if anyone has a good solution to that, please speak up!</p>