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

Template

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

Component

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

@Component({
  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;
  }
}

Answer

You could use Template variable:

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

See StackBlitz example.

Advertisement

Answer