If blocks ({#if}) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the {#if} block in Svelte?

The {#if} block in Svelte is used to conditionally show or hide parts of the UI based on a true or false condition.

beginner

How do you write an {#if} block with an else condition in Svelte?

You write it like this:<br>

{#if condition}<br>   <br>{:else}<br>   <br>{/if}

intermediate

Can you nest {#if} blocks inside each other in Svelte?

Yes, you can nest {#if} blocks inside each other to check multiple conditions and show different UI parts accordingly.

beginner

What happens if the condition in an {#if} block is false and there is no {:else} block?

Nothing is rendered for that {#if} block. The UI part inside the block is simply not shown.

intermediate

How does Svelte update the UI when the condition in an {#if} block changes?

Svelte automatically updates the UI by adding or removing the block's content when the condition changes, without needing manual DOM manipulation.

Which syntax correctly starts an if block in Svelte?

A {#if condition}

B <if condition>

C {if condition}

D #if(condition)

Svelte uses {#if condition} to start an if block.

What does the {:else} block do in Svelte's if block?

A Runs code when the condition is true

B Defines a new variable

C Ends the if block

D Runs code when the condition is false

The {:else} block runs when the if condition is false.

If you omit the {:else} block and the condition is false, what happens?

A Nothing is shown for that block

B The block shows anyway

C An error occurs

D The app crashes

Without {:else}, nothing is rendered if the condition is false.

Can you put one {#if} block inside another in Svelte?

A No, nesting is not allowed

B Only with special syntax

C Yes, nesting is allowed

D Only in scripts

Svelte allows nesting {#if} blocks inside each other.

How does Svelte handle UI updates when an {#if} condition changes?

A You must manually update the DOM

B Svelte automatically updates the UI

C The page reloads

D Nothing happens

Svelte automatically updates the UI when reactive conditions change.

Explain how to use {#if} blocks in Svelte to show content conditionally.

Think about how you decide to show or hide things based on a yes/no question.

Describe what happens behind the scenes when the condition in an {#if} block changes in Svelte.

Imagine Svelte as a helper that watches your conditions and updates the screen for you.