Introduction to Svelte Data Bindings

:dart: Learning Objectives

By the end of this lesson, you will be able to:

• Create two-way data bindings between UI elements and variables
• Use different binding directives for various input types
• Implement data binding between parent and child components
• Build interactive forms with real-time updates

:information_source: What is Data Binding? Data binding in Svelte creates a two-way connection between user input and your application's data. When users type or interact with form elements, the data updates automatically. When you change the data in code, the UI updates instantly!

Data binding makes connecting your UI with data much easier!

:sparkles: Why Use Data Binding?

Data binding in Svelte gives you several advantages:

• Smaller code size - Write less code to achieve more functionality
• Less boilerplate - No need for event listeners and manual updates
• Better performance - Svelte optimizes your bindings for speed

:hammer_and_wrench: Making Data Bindings In Svelte

:memo: Text Input Binding

In regular JavaScript, you need to create event listeners and manually update values. That's a lot of work!

Svelte makes this super easy. Just add bind:value to your input tag, and you're done!

:bulb: Tip When you type in the input field, the variable updates instantly. When you change the variable in code, the input field updates too!

App.svelte

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

<input type=text bind:value=\{name\}>
<p>
  Hi, \{name\}
</p>

:page_facing_up: Textarea Binding

Textareas work just like text inputs! Use the same bind:value directive:

App.svelte

<script>
  let text = "";
</script>

<textarea bind:value=\{text\}></textarea>
<p>You wrote:<br />\{text\}</p>

:emoji: Numeric Input Binding

Numeric inputs use bind:value too! You can even bind the same variable to both a number input and a range slider:

App.svelte

<script>
  let x = 0;
  let y = 1;
</script>

<label>
  <input type=number bind:value=\{x\} min=0 max=10>
  <input type=range bind:value=\{x\} min=0 max=10>
</label>

<label>
  <input type=number bind:value=\{y\} min=0 max=10>
  <input type=range bind:value=\{y\} min=0 max=10>
</label>

<p>\{x\} + \{y\} = \{x + y\}</p>

:memo: Note Cool Feature Alert! :tada:

Notice how the range slider moves when you type a number? That's because both inputs are bound to the same variable! Also, Svelte automatically calculates {x + y} for you - no extra code needed!

:white_check_mark: Checkbox Binding

For a single checkbox, use bind:checked instead of bind:value. This binds to a boolean (true/false) value.

Watch how the value changes from false to true when you check the box:

app.svelte

<script>
  let isChecked=false;
</script>

Are you a student? <input type=checkbox bind:checked=\{isChecked\}>

<p>
  \{isChecked\}
</p>

Output before the checkbox is checked:

Output after the checkbox is checked:

:bulb: Tip Multiple Checkboxes? If you have more than one checkbox working together, use bind:group instead (explained below)!

:emoji: Radio Button Binding

Radio buttons need bind:group because only one option can be selected at a time. This directive binds all radio buttons together and stores the selected value.

See how the output changes instantly when you select different options:

App.svelte

<script>
  let pieces = 1;
</script>

<label>
  <input type="radio" bind:group=\{pieces\} value=\{1\}>
  One Piece
</label>

<label>
  <input type="radio" bind:group=\{pieces\} value=\{2\}>
  Two Pieces
</label>

<label>
  <input type="radio" bind:group=\{pieces\} value=\{3\}>
  Three Pieces
</label>

<p>Selected Piece(s): \{pieces\}</p>

:link: Data Binding between Parent and Child Components

Usually in Svelte, data flows one way: from parent to child. The parent passes data down, but the child can't send data back up.

But wait! With data binding, children can update parent data too! Here's how:

App.svelte (Parent component)

<script>
  import Input from './Input.svelte';
  let textValue = "";
</script>

<Input bind:prop={textValue} />

<p>
  \{textValue\}
</p>

Input.svelte (Child component)

<script>
  export let prop;
</script>

<input type="text" placeholder="Type Something" bind:value={prop}>

Let's break down what's happening:

1. Child component (Input.svelte) uses bind:value to bind the input to its prop
2. Parent component (App.svelte) uses bind:prop to create a two-way binding with the child
3. When you type in the child's input, the parent's textValue updates automatically!

:memo: Note Important: The name after bind: in the parent must match the exported prop name in the child component.

:clipboard: Quick Reference Summary

Here's everything you learned about Svelte data binding:

:bulb: Remember These Key Points

• Data binding creates two-way connections - changes flow both directions
• Svelte's bindings reduce code - no event listeners needed
• Bindings give you better performance than manual DOM updates
• Child components can update parent data with bind:prop

:rocket: Practice Time!

Now it's your turn! Try creating:

1. A form with different input types that all use data binding
2. A parent component that receives data from multiple child components
3. A calculator that updates results as you type numbers

Remember: The best way to learn is by doing. Open your code editor and start binding!