Why am I in front of two different decimal separators on the same line?

Issue

Being in France where the decimal separator is the comma, I wrote this component that displays a line where:

• two numbers are decimal (commune.population and commune.surface have the number type)
• but show unexpectedly both different decimal separators: a point for the surface, a comma for the density.

Commune de 176016 habitants et de 80.03 km² (densité : 2,199)
de l'intercommunalité Saint-Etienne Métropole

Why is it so?

<div class="row">
  <div class="presentation_cadre" id="presentation_cadre">
    <ng-template [ngIf]="isCommuneSelected()" [ngIfElse]="pasDeCommuneSelectionnee">
      <div>
        <h4>{{ commune.nomCommune }} ({{ commune.nomDepartement }} ({{ commune.codeDepartement }}))</h4>

        <small>
          <div>Commune de {{ commune.population }} habitants et de {{ commune.surface / 100.0 }} km² (densité : {{ this.getDensitePopulation() | number:'1.0-0' }})</div>
          <div>de l'intercommunalité {{ commune.nomEPCI }}</div>
        </small>
      </div>
    </ng-template>

    <ng-template #pasDeCommuneSelectionnee>
      Les informations sur une commune s'afficheront ici
    </ng-template>
  </div>
</div>

public getDensitePopulation() : number {
  if (this.commune == null || this.commune.surface == 0) {
    return 0
  }

  let surfaceKm2 = this.commune.surface / 100.00; // La surface est exprimée en hectares
  return this.commune.population / surfaceKm2
}

Solution

For the density, you're using a DecimalPipe, which does the following (straight from docs):

Formats a value according to digit options and locale rules. Locale determines group sizing and separator, decimal point character, and other locale-specific configurations.

Since the current locale is FR (France), it formats it using a comma. You could format the number according to the locale yourself pretty easily with toLocaleString:

// NOTE: I only pass "FR" here to show what the French locale would output.
// NOTE: It is an optional parameter, where if you don't provide it, it will
// NOTE: default to the locale of the user
console.log((80.03).toLocaleString("FR"));

So that would look like this for you:

{{ (commune.surface / 100.0).toLocaleString() }}

Reference: MDN Number.prototype.toLocaleString

Although, to be more consistent, you should just use another DecimalPipe for the area.

Answered By - katniss