Skip to content

Angular, resetting input field back to a default value

In the following example i want to be able to reset input field to default value, (after user might have changed the input value manually)

the main problem is, that default value never changes, so re-setting it does nothing


  <label>Select a number </label>
  <input [value]="defaultValue" />
  <button (click)="onClick()">Reset to default Number</button>


import { Component } from '@angular/core';

  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
export class AppComponent {
  defaultValue = 10;
  onClick() {
    //wont work, because we are not changing the default.
    this.defaultValue = 10;


You could use Template variable:

<input [value]="defaultValue" #input />
<button (click)="input.value = 10">Reset to default Number</button>

See StackBlitz example.