Help with inputs and typescript

I feel like this is more of a typescript question but I’m not sure. And just a disclaimer, I have little to no experience with typescript, so this might be the source of the problem.
So, I created two inputs for the type number like so:

          <ion-input type="number" [(ngModel)]="todo.quantidade" name="quantidade"></ion-input>
          <ion-input type="number" [(ngModel)]="todo.preco" name="preco"></ion-input>

And the typescript file looks like this:

import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {

  imgURL = '';

  public todo = {categoria: String, quantidade: 0, preco: 0};

  public total = 0;
  public quantidadeTotal = 0;

    private camera: Camera
  ) {}

  getCamera() {>{
      this.imgURL = res;
    }).catch(e => { 

  logForm() {

  updateTotal() { += this.todo.preco * this.todo.quantidade;
    this.quantidadeTotal += this.todo.quantidade;


And when I go to look at the input by default it looks like this:

For some reason it already starts with the value that was instanciated inside of the typescript file, I’m not sure how I can work around this. I would like the input to only have a placeholder.


Hi, the key point is at this line:

public todo = {quantidade: 0, preco: 0};

You can change this line to:

public todo = {quantidade: null, preco: null};

This will make the input element won’t have the initial value, thus it can display the placeholder.



I make a stackblitz playground (Ionic input placeholder and typescript - StackBlitz), so you can see these changes in actions, hope this is helpful :smile: