Two-Way Data Binding

Vuev-model

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('')
</script>

<template>
  <input v-model="name" type="text" />

  <p>Name: {{ name }}</p>
</template>

It uses v-model to automatically synchronize the input value with reactive state.

Vue docs

Reactvalue + onChange

import { useState } from 'react'

function NameField() {
  const [name, setName] = useState('')

  return (
    <>
      <input
        type="text"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />

      <p>Name: {name}</p>
    </>
  )
}

It controls the input by passing value and updating state with onChange on every change.

React docs

Angular[(ngModel)]

import { Component } from '@angular/core'
import { FormsModule } from '@angular/forms'

@Component({
  selector: 'app-name-field',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="name" type="text" />

    <p>Name: {{ name }}</p>
  `,
})
export class NameFieldComponent {
  name = ''
}

It uses the ngModel directive with the [(...)] syntax to synchronize the input with component state.

Angular docs