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;
  }
}