Two-Way Binding in Other UI Frameworks

[nailuj29]

Angular

HTML:

<p>Hello {{name}}!</p>
<input type="text" [(ngModel)]="name">

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'app-data-binding',
  templateUrl: './data-binding.component.html',
  styleUrls: ['./data-binding.component.css']
})
export class DataBinding {

  public name: string = '';

}

Vue

<template>
  <p>Hello {{name}}!</p>
  <input type="text" v-model="name">
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const name = ref('')

    return { name }
  }
}
</script>

Svelte

<script>
let name = '';
</script>

<p>Hello {name}!</p>
<input type="text" bind:value={name}>

Blazor

<p>Hello @name</p>
<input type="text" @bind-value=name>

@code {
  string name;
}