Probleme with type number

Hello,
I create a calculator and I have small concerns.
in I have to add the numbers of “input” I then put the “type = number” and I have 2 arrows up and down which appear, how to remove them?
I want my result to display at 2 decimals but if I put the {{mgDrop.toFixed (2)}} I have my 2 decimals but it will create an error that blocks the navigateLink.

Thank you in advance for your assistance.
html:

    <p>Utiliser notre calculateur pour définir votre dosage exact</p>
    <ion-label position="floating">Taille de la bouteille en ml:</ion-label>
    <ion-input [(ngModel)]="mlBottle" type="number" placeholder="Saisir ici" clearInput></ion-input>
    <ion-label position="floating">Dosage en mg:</ion-label>
    <ion-input [(ngModel)]="miligram" type="number" clearOnEdit placeholder="Saisir ici" clearInput></ion-input>
    <ion-label>Taux:</ion-label>
    <p>{{ percent1 }} %</p>
    <p>Nombre de goutte dans la bouteille: {{ nbDrop }}</p>
    <p>Mg / goutte: {{ mgDrop }} mg</p>
    <ion-button fill="outline" (click)="listenName()">Calculer le taux</ion-button>

ts:

export class HomePage {
  mlBottle: number;
  miligram: number;
  percent1: number;
  nbDrop: number;
  mgDrop: number;

  constructor() {}

  listenName() {
    this.percent1 = this.miligram / 10 / this.mlBottle;
    this.nbDrop = this.mlBottle * 31;
    this.mgDrop = this.miligram / this.nbDrop;
  }
}