Add standalone component & two-way binding to ng input example (#205)

content/6-form-input/1-input-text/angular/input-hello.component.ts

@@ -1,13 +1,14 @@
 import { Component } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import {FormsModule} from "@angular/forms";
 
 @Component({
   selector: "app-input-hello",
-  template: `<input [value]="text" (change)="handleInputChange($event)" />`,
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `<p>{{text}}</p>
+  <input [(ngModel)]="text">`,
 })
 export class InputHelloComponent {
   text = "";
-
-  handleInputChange(event: Event) {
-    this.text = (event.target as HTMLInputElement).value;
-  }
 }

content/6-form-input/2-checkbox/angular/is-available.component.ts

@@ -1,21 +1,21 @@
 import { Component } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import {FormsModule} from "@angular/forms";
 
 @Component({
   selector: "app-is-available",
+  standalone: true,
+  imports: [CommonModule, FormsModule],
   template: `
     <input
       id="is-available"
       type="checkbox"
-      [checked]="isAvailable"
-      (change)="handleChange()"
+      [(ngModel)] = "isAvailable"
     />
     <label for="is-available">Is available</label>
   `,
 })
 export class IsAvailableComponent {
   isAvailable = false;
 
-  handleChange() {
-    this.isAvailable = !this.isAvailable;
-  }
 }

content/6-form-input/3-radio/angular/pick-pill.component.ts

@@ -1,33 +1,31 @@
 import { Component } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import {FormsModule} from "@angular/forms";
 
 @Component({
   selector: "app-pick-pill",
+  standalone: true,
+  imports: [CommonModule, FormsModule],
   template: `
     <div>Picked: {{ picked }}</div>
 
     <input
       id="blue-pill"
-      [checked]="picked === 'blue'"
       type="radio"
       value="blue"
-      (change)="handleChange($event)"
+      [(ngModel)]="picked"
     />
     <label for="blue-pill">Blue pill</label>
 
     <input
       id="red-pill"
-      [checked]="picked === 'red'"
       type="radio"
       value="red"
-      (change)="handleChange($event)"
+      [(ngModel)]="picked"
     />
     <label for="red-pill">Red pill</label>
   `,
 })
 export class PickPillComponent {
   picked = "red";
-
-  handleChange(event) {
-    this.picked = event.target.value;
-  }
 }

content/6-form-input/4-select/angular/color-select.component.ts

@@ -1,9 +1,13 @@
 import { Component } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import {FormsModule} from "@angular/forms";
 
 @Component({
   selector: "app-color-select",
+  standalone: true,
+  imports: [CommonModule, FormsModule],
   template: `
-    <select [value]="selectedColorId" (change)="handleChange($event)">
+    <select [(ngModel)]="selectedColorId">
       <option
         *ngFor="let color of colors"
         [value]="color.id"
@@ -23,8 +27,4 @@ export class ColorSelectComponent {
     { id: 3, text: "green" },
     { id: 4, text: "gray", isDisabled: true },
   ];
-
-  handleChange(event) {
-    this.selectedColorId = event.target.value;
-  }
 }