Angular2 show two decimals in input

I would suggest you to use a mask on the input field there is a package text-mask that i've used before and works!

Note: take a look at you html input type, you said that is number, but actually in your question the type is button

To use the package:

1. Install the packages

   npm i angular2-text-mask text-mask-addons --save

2. Import it in you app-module file

   import { TextMaskModule } from 'angular2-text-mask';
   
   @NgModule({
     imports: [
       /* ... */
       TextMaskModule
     ]
     /* ... */
   })
   export class AppModule { }
   

3. In you component.ts

   import createNumberMask from 'text-mask-addons/dist/createNumberMask';
   
   @Component({   
     selector: 'app-my-component',   
     templateUrl: './my-component.html',   
     styleUrls: ['./my.component.scss'] }) 
   
     export class MyComponent implements OnInit { 
     public price = 0;
   
     private currencyMask = createNumberMask({
       prefix: '',
       suffix: '',
       includeThousandsSeparator: true,
       thousandsSeparatorSymbol: ',',
       allowDecimal: true,
       decimalSymbol: '.',
       decimalLimit: 2,
       integerLimit: null,
       requireDecimal: false,
       allowNegative: false,
       allowLeadingZeroes: false
     });
   
   }
   

4. In your component.html

   <input type="text" [textMask]="{mask: currencyMask}" name="receivedName" id="received" class="form-control" maxlength="50" [(ngModel)]="price"/>
   

tl;dr; Option 1: return a string, don't convert to number. Option 2: Use a number pipe.

toFixed returns a string.

You are converting the result of toFixed to a number

return +(this.getCost() * this.getQuantity()).toFixed(2);
       ↑

When you convert "1.20" to a number it will "remove" the extra 0 returning 1.2.

To show the result with 2 decimals you can return the result as a string so the 0 doesn't get cut off, or use a pipe.

You can use the number pipe

{{ 1.20 | number:'1.2-2' }}

Format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

• minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.
• minFractionDigits is the minimum number of digits after fraction. Defaults to 0.
• maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.

With the pipe you can keep your code returning a number and it will only change how the value is formatted when you show it on the screen.

I don't know if I understood the problem correctly but what I understood is you somehow want to force the input to contain two digits after decimal. Here is a try: You need to convert the number to a float type and as you want it to be fixed to two decimal points use toFixed method.

Number.parseFloat(x).toFixed(2)
//Where x is the number which needs to be converted to a float type.

I hope this helps.

At the end I did't find the right answer...

What I did was to create the following function

fixDecimals(value : string){
    value = "" + value;
    value = value.trim();
    value = parseFloat(value).toFixed(2);
    return value;
  }

And I changed the input type to text (instead of number).

And I'm calling this function in the ngOnInit so, I'm always showing the number with to decimals to the user. The only pending thing is that if the user change the value and remove the decimals, the number won't be completed with the corresponding 00.

I tried with the onChange, but the prompt goes to the end of the input (which is very awkard for the user)

If your input is inside a form with name: inputForm e.g

HTML

    <form [formGroup]="inputForm">
      <input name="number" (keyup)="fixNumber()" pattern="^[0-9]+(\.[0-9]{1,2})?" step="0.01" `enter code here`formControlName="number" type="button" class="form-control" id="number">
</form>

TS

public fixNumber(){

      let value =this.inputForm.get('number').value;
      let prefix:string = value.toString().split('.')[0];
      let suffix:string = value.toString().split('.')[1];
      if(suffix.length > 2){
        let suffix_subed = suffix.substr(0,2);
        let new_value = prefix+'.'+suffix_subed;
        this.inputForm.get('number').setValue(new_value);
      }
}

You may get some log erros, but i think that's not big dead for that workaround

Use This Pipe

{{ number | number : '1.2-2'}}

In angular 2 have DecimalPipe this will helpful to your requirement.Please Use it. Sample:

Use format '3.2-5' : 

minIntegerDigits = 3 
minFractionDigits = 2 
maxFractionDigits = 5 

num = 12.324324

{{num1 | number:'3.2-5'}} 

012.63847 

DecimalPipe

DecimalPipe is an angular Pipe API and belongs to CommonModule. DecimalPipe is used to format a number as decimal number according to locale rules. It uses number keyword with pipe operator. Find the syntax.

number_expression | number[:digitInfo]

Finally we get a decimal number as text. Find the description. number_expression: An angular expression that will give output a number. number : A pipe keyword that is used with pipe operator. digitInfo : It defines number format.

Now we will understand how to use digitInfo. The syntax for digitInfo is as follows.

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

Find the description.

minIntegerDigits : Minimum number of integer digits. Default is 1. 
minFractionDigits : Minimum number of fraction digits. Default is 0. 
maxFractionDigits : Maximum number of fraction digits. Default is 3.