Svelte button component example. It includes how binding click works. I

Svelte Hello-world

Svelte is an open-source javascript compiler that results in high performance and reduced javascript code/.

It is Less bundle in size compared with other frameworks such as React, VueJS, and Angular.

A:\work\w3schools\svelte>npx degit sveltejs/template ButtonExample
Need to install the following packages:
  degit
Ok to proceed? (y) y
> cloned sveltejs/template#HEAD to ButtonExample

sveltejs/template is a repository to clone as a new project with the given name

Run below commands

npm install npm run build

ButtonExample is the name of the project

Create a Component

Let’s create a component called button-click.svelte.

Each component contains three sections in svelte.

HTML section

It contains HTML code to display the HTML UI.

So, Adding button using html button tag or input tag

  <button >
    Click me
  </button>

The button needs click event binding, Let’s add button binding in svelte.

Here is an syntax for event buding in svelte

<element on:event|modifier="{functionname}">

on is a keyword to attach event binding to an element. event names are event types such as click or mouseDrag.

the modifier is options passed to events. and following are modifiers preventDefault: With this, does not allow to prevent form submit, and drag and drop. It is equal to an event.preventDefault() stopPropagation: equal to event.stopPropagation() method, allow preventing parent event bubbles. passive:equal to passive: true for event listener nonpassive:equal to passive: false for event listener once:equal to once: true for event listener capture: equal to capture: true for event listener self: Event listener calls if event dispatched from the same element, but not from children Here is an example

  <button on:click="{sayHello}">
    Click me
  </button>

sayHello is a function called whenever a button clicks.

In script, Create a function sayhello() like below

<script>
  function sayHello() {
  console.log("Hello World")
}
</script>

Here is an example button-click.svelte

<script>
  function sayHello() {
    console.log("Hello World")
  }
</script>

<main>
  <h1> Button Click Event example</h1>
  <button on:click="{sayHello}">
    Click me
  </button>

</main>

<style>
  
</style>

How to pass parameters to button click event in svelte?

You can pass the parameters to function as below syntax

  <button on:click={() => printName("John")}> Print </button>

Inside use arrow expression with the parenthesis({}) and braces to pass parameters to a function.

Here is an component example

<script>
  function printName(name) {
    console.log("Hello", name);
  }
</script>

<main>
  <h1>Button Click Event passing data example</h1>
  <button on:click={() => printName("kiran")}> Print </button>
</main>

<style>
</style>

An example to increment and decrement numbers with an example

This example has two buttons- increment and decrement On clicking the increment button, It increments the numbers by 1. On clicking the decrement button, It decrements the numbers by 1.

Finally, result updates result to input text.

In Scripts,

  • Created a reactive variable number initialized with zero.
  • used arrow function syntax to create a function.
  • These functions are bound to buttons.
  • Input text is assigned with a reactive variable using {} syntax
<script>
  let number = 0;
  let increment = () => (number += 1);
  let decrement = () => (number -= 1);
</script>

<main>
  <h1>Button Increment and decrement example</h1>
  <button on:click={increment}>Increment</button>
  <button on:click={decrement}>Decrement</button>
  <input value={number} size="9" />
</main>

<style>
</style>