Buy Now and unlock this series
$
49
.99
yours forever
$
49
.99
Become a Pro and unlock everything
$
24
.99
per month
$
24
.99
Fancy Input
In this video, we will create a robust and reusable input field component to take the place of our current search filter.
Downloads
Become a pro to download code and videos
Building Svelte Components
22 videos
Released: June 30 2021Course Instructor
Scott Tolinski
- Getting Started
null - Creating a Toggle
14m42s - A More Configurable Toggle
null - Accordion with Mounting and Unmounting
null - Accordion Without UnMounting with Actions Part 1
null - Animating Our Accordion With the Web Animations API
14m28s - Search Filter with Reactive Statements
13m52s - Search List Input
14m0s - Fancy Input
16m39s - Markdown Input
11m29s - Making A Portal
10m40s - Making A Modal
14m32s - Advanced Custom Stores With a Toast Message
14m55s - Flip and Transition Animations with Toast Messages
9m41s - Using Tweened As a Timeout
10m37s - Complex State Updates With Toast Messages
11m3s - Dismiss-able Toasts and Error Toasts
null - Click Outside Action
11m45s - Storybook with Svelte Kit
10m25s - Storybook With Updating Props
6m19s - Creating an NPM Package With Svelte Kit
5m23s - Where To Go From Here
2m15s
Comments
Teddy
about 1 year ago
Unfortunately, I was not able to replicate the effect of whatever I typed into the field that was showing in the input box for the search filter. However, it does show it binded just for whatever reason just not to the value in the search filter? just as you typed it.
<input on:input={handleInput} {type} {value} {placeholder} />
Field Component
Search Filter
Tomer
11 months ago
It's not working for me as well, not sure if this is a svelte versioning issue. a workaround is to create the handleOnInput function on the parent component
Field bind:value={search} on:input={(e) => { search = e.target.value; }} />
Want to join the conversation?
Become a Pro member today!