// name-form.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-name-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="name" placeholder="Enter your name" />
    <p>Hello, {{ name }}!</p>
  `,
})
export class NameFormComponent {
  name = '';
}

/*
  Notes:
  - FormsModule must be listed in this component's own imports array
    — without it, [(ngModel)] fails to compile with an "unknown
    property" error on the template.
  - [(ngModel)]="name" keeps the input's text and the name property
    in sync automatically in both directions — no separate (input)
    event binding or manual assignment needed, unlike Chapter 3's
    earlier $event example.
*/