Day 5 - User Inputs in Component

On day 5, I will show how to bind an input field and a checkbox to the reactive states. The corresponding states are updated and displayed in the template when input values are updated.

Create an input field and a checkbox

• Vue 3 application

The script tag has new refs that the HTML inputs will bind to. The newItem ref will be bound to the input field and the newItemHighPriority will be bound to the checkbox

<script setup lang="ts">
   import { Icon } from "@iconify/vue";
   import { ref } from 'vue';

   const newItem = ref('')
   const newItemHighPriority = ref(false)
</script>

<template>
    <input v-model.trim="newItem" name="newItem" />
    {{ newItem }}
    <label>
      <input type="checkbox" v-model="newItemHighPriority" name="newItemHighPriority" />
        High Priority
    </label>
    {{ newItemHighPriority }}
</template>

The v-model.trim directive trims the text input before assigning the value to the newItem ref. The muscle syntax, {{ newIem }}, is added for verification temporarily. When the text input receives a new value, newItem is also updated.
The v-model directive binds to the checkbox. The checkbox is unchecked because newItemHighPriority's initial value is false. When the checkbox is checked, newItemHigherPriority is updated to true and the {{ newItemHigherPriority }} expression displays true.

• SvelteKit application

Two new $state runes are defined in the script tag, one is newItem and the other is newItemHighPriority.

<script lang="ts">
   let newItem = $state('');
   let newItemHighPriority = $state(false)
</script>

<input bind:value={newItem} name="newItem" />
{ newItem }
<label>
   <input type="checkbox" name="newItemHighPriority"  bind:checked={newItemHighPriority} />
     High Priority
</label>
{ newItemHighPriority }

The bind:value syntax binds the text input to the newItem rune. The expression, { newIem }, is added for verification temporarily. When the text input receives a new value, newItem is also updated.
The bind:checked directive binds to the newItemHighPriority rune. The checkbox is unchecked because the corresponding rune's initial value is false. When the checkbox is checked, the newItemHigherPriority rune is updated to true and the { newItemHigherPriority } expression displays true.

• Angular 19 application

The ShoppingCartComponent class declared newItem and newItemHigherPriority signals. The initial values inferred that the type of newItem signal is a string and the type of newItemkHigherPriority signal is a boolean. When the getter functions are invoked, the value of both signals can be displayed in the inline template.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-shopping-cart',
  imports: [FormsModule],
  viewProviders: [],
  template: `
       <input type="text" name="newItem" [(ngModel)]="newItem" /> {{ newItem() }}
       <label>
          <input type="checkbox" [(ngModel)]="newItemHighPriority" name="newItemHighPriority" />
          High Priority
        </label> {{ newItemHighPriority() }}
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShoppingCartComponent {
  newItem = signal('');
  newItemHighPriority = signal(false);
}

In the ShoppingCartComponent class, I imported FormsModule from @angular/forms.
The imports array of the Component decorator imports FormsModule so that the HTML inputs can bind to the signals. [(ngModel)]="newItem" binds the text field to newItem and [(ngModel)]="newItemHigPriority" binds the checkbox to newItemHighPriority.
The mustache syntax displays the signal values when the HTML inputs receive new values.

We have successfully updated the shopping cart component to create HTML inputs to bind to different frameworks and libraries' refs/runes/signals.