Conditional Rendering in Svelte
In this post we will give you information about Conditional Rendering in Svelte. Hear we will give you detail about Conditional Rendering in SvelteAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to render elementsconditionally in svelte.js.
What is conditional rendering?
Conditional rendering means to show or hide elements from the dom based on the particular condition.
Svelte has a special syntax to render elements conditionally.
{#if isActive} <h1>Im active</h1>{/if}
Note: # indicates the block opening and / indicates block closing.
Let’s see an example.
<script> let isActive = true;</script> <div> {#if isActive} <h1>Im active</h1> {/if} </div>
In the above code, we only render the h1 element into the domif isActive property is true.
Else block
We can also combine if block with else block.
<script> let isActive = true;</script> <div> {#if isActive} <h1>You can see me</h1> {:else} <h2>You can't see me</h2> {/if} </div>
Else if block
We can also further chain it with else if block.
<script> let isActive = true;</script><div> {#if isActive === true} <h1>You can see me</h1> {:else if isActive === 4} <h1>You can see me only if isActive is 4</h1> {:else} <h2>You can't see me</h2> {/if}</div>
In the above code, we only render else if block h1 element if isActive === 4.
Hope this code and post will helped you for implement Conditional Rendering in Svelte. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs