Svelte Tutorial for Beginners #17 - Dispatching Custom Events

Hey all, in this Svelte tutorial we'll see how we can dispatch a custom event from one component and react to it in a parent component. We'll use this idea to add new data rom our form inputs to the app state.

🐱‍👤🐱‍👤 JOIN THE GANG -
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Course Files:

🐱‍💻 🐱‍💻 Other Related Free Courses:

🐱‍💻 🐱‍💻 Svelte Docs

🐱‍💻 🐱‍💻 The Net Ninja Community Boards:

[kkkwinkkk]

Adding skills
{#if person.skills}
<div class="skills">
<ul>
{#each person.skills as skill}
<li class="skill">
{skill}
</li>
{/each}
</ul>
</div>
{/if}
Thanks for all the help Shaun, not just for this course but also for the other amazing courses

[andrewleonardi]

Once I wrapped my head around this all I can say is Svelte is amazing and so is this tutorial!

[chemedev]

For output skills:
{#each person.skills as skill, i}
<p>{skill}</p>
{/each}
(i is the index of the forEach)
Also have to add the "skill: []" property for the hardcoded people or it will throw error cause #each can't iterate over them!

[RuiBarreiras]

you are one of the best programming teachers out there! Side-by-side with Daniel Schiffman, Brad Shiff and Max Schwartzmueller. I wish you could have much more courses at Udemy.

[Fullflexno]

Just popping in to say thank you! Stay sharp, ninja!

[kodetumbuh]

Shaun a.k.a the net ninja is the best instructor at the universe

Thank you for your effort to make contents

[dynerushd]

Another way of adding skills using hasOwnProperty on the person object.
Adding skills underneath <p>{person.age} years old, {person.beltColor} belt.</p> :

<div class="skills">
{#if
{#each person.skills as skills}
<p>{skills}</p>
{/each}
{/if}
</div>

Some simple styling

.skills{
display: flex;
justify-content: center;
flex-direction: row;
}

.skills p{
margin-top: 0;
margin-bottom: 15px;
}

.skills p::before{
content: '[ ';
}
.skills p::after{
content: ' ]';
}

Thanks for these amazing courses master ninja!

[kill_switch_]

great at explaining the dispatcher, tnx;

[dcernach]

Amazing video series... Just waiting for Svelte stores...

[MaxProgramming]

I am using the Microsoft Edge Chromium browser and it works great. What do you think of it in front of Chrome? It has a lot of features also. I suggest you to try it out once.

[valentinaklepikova]

tutorials are amazing. Very simple and understandable, thanks a lot. Got one question though - why did u spread the people insted of pushing to it. I mean you either iterate while spreading or do it in constant time

[agentyorlim]

I love your tutorials...learnt a lot...please make a video on Google DialogFlow...tutorials are very rare on that

[justingolden]

What's the advantage of creating a custom event and calling it, then listening for it in another script, as opposed to just calling a function in the other script?

[marisakirisame]

Just adding further to something you explained. In react we can pass a `setStateAction` to modify a parent component's state inside a child component. But in svelte, just passing the variables as props and trying to mutate them inside a child won't mutate their values in the parent components. I.e. Props go down and you can change them in the parent component but not the same way in the child. I was just a bit stuck on why we can't forward the form submit event at 1:16 but I think this is the reason why it won't work.

[vaishnavideshmukh]

Thanks a lot for such a informative and fun tutorial!!!!

[AdamHWeiss-mpkf]

Been searching for this, thank you!!!

[bobzebeam]

One version to show skills -
{#if person.skills}
<div class="skills">
<h3>skills include:</h3>

{#each person.skills as skill}
<p>{" "}{skill}{", "}</p>
{/each}
</div>
{/if}

[mechagodzyzzathotobliterat]

Will there be a video on Sapper in the future? Honestly love your channel mate subbed

[mscdaddy]

<div>
{#each person.skills as skill(skill)}
<span style="padding: 10px">{skill}</span>
{/each}
</div>

[rodstelon]

Great tutorial and I'm converted BUT can you use MySQL on the back end?