Binding Bidireccional de Datos

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>

Usa v-model para sincronizar automáticamente el valor del input con un estado reactivo.

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>
    </>
  )
}

Controla el input pasando value y actualizando el estado con onChange en cada cambio.

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 = ''
}

Usa la directiva ngModel con la sintaxis [(...)] para sincronizar el input con el estado del componente.

Angular docs