// value-watcher.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-value-watcher',
  standalone: true,
  template: `<p>Current value: {{ value }}</p>`,
})
export class ValueWatcherComponent implements OnChanges {
  @Input() value = 0;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['value']) {
      console.log(
        'value changed from',
        changes['value'].previousValue,
        'to',
        changes['value'].currentValue
      );
    }
  }
}

// app.component.ts
import { Component } from '@angular/core';
import { ValueWatcherComponent } from './value-watcher.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ValueWatcherComponent],
  template: `
    <button (click)="count = count + 1">Increase</button>
    <app-value-watcher [value]="count"></app-value-watcher>
  `,
})
export class AppComponent {
  count = 0;
}

/*
  Notes:
  - ngOnChanges fires once initially (with previousValue undefined),
    then again every time the [value] input changes from the parent.
  - SimpleChanges is keyed by input name; changes['value'] holds both
    previousValue and currentValue, letting the child react to exactly
    how the input changed.
*/