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:

{#if condition}
   
{:else}
   
{/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.

Practice

1. What does the {#if} block do in Svelte?

easy

A. It conditionally shows or hides content based on a true or false value.

B. It loops over a list of items to display them.

C. It styles elements with CSS inside the component.

D. It defines a reusable component.

Solution

1. Step 1: Understand the purpose of {#if}

   The {#if} block is used to check a condition and decide if some content should be shown or hidden.

2. Step 2: Compare with other options

   Looping is done with {#each}, styling is done with CSS, and reusable components are separate files or functions.

3. Final Answer:

   It conditionally shows or hides content based on a true or false value. -> Option A

4. Quick Check:

   Conditional display = C [OK]

Hint: If you want to show/hide, think {#if} block [OK]

Common Mistakes:

• Confusing {#if} with loops like {#each}
• Thinking {#if} styles elements
• Mixing {#if} with component creation

2. Which of the following is the correct syntax for an {#if} block in Svelte?

easy

A. {if condition} ... {endif}

B. <if condition> ... </if>

C. {#if condition} ... {/if}

D. {#if condition} ... {#end}

Solution

1. Step 1: Recall Svelte if block syntax

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

2. Step 2: Check other options for correctness

   Options A and C use incorrect syntax from other languages or HTML. {#if condition} ... {#end} uses a wrong closing tag.

3. Final Answer:

   {#if condition} ... {/if} -> Option C

4. Quick Check:

   Correct Svelte if syntax = B [OK]

Hint: Remember Svelte uses {/if} to close if blocks [OK]

Common Mistakes:

• Using HTML <if> tags instead of Svelte syntax
• Forgetting the # in {#if}
• Using wrong closing tags like {#end}

3. What will be rendered by this Svelte code?

{`\n{#if loggedIn}\n  
Welcome back!
\n{:else}\n  
Please log in.
\n{/if}`}

medium

A. Welcome back!

B. Please log in.

C. Nothing will be shown

D. Syntax error

Solution

1. Step 1: Check the value of loggedIn

   The variable loggedIn is set to false initially.

2. Step 2: Understand the if-else block behavior

   If loggedIn is true, it shows "Welcome back!"; else it shows "Please log in." Since loggedIn is false, the else block runs.

3. Final Answer:

   <p>Please log in.</p> -> Option B

4. Quick Check:

   loggedIn false shows else block = A [OK]

Hint: False condition shows {:else} content [OK]

Common Mistakes:

• Assuming false shows the if block content
• Ignoring the {:else} block
• Thinking no output if condition false

4. Identify the error in this Svelte code snippet:

{`\n{#if count > 3}\n  
Count is high
\n{:else if count > 1}\n  
Count is medium
\n{:else}\n  
Count is low
\n{/if}`}

medium

A. The syntax {:else if} is invalid in Svelte.

B. The variable count should be declared with const, not let.

C. The closing tag {/if} is missing.

D. There is no error; the code is correct.

Solution

1. Step 1: Check if {:else if} is valid in Svelte

   Svelte supports {:else if} syntax to chain conditions inside {#if} blocks.

2. Step 2: Verify variable declaration and closing tags

   Using let for count is correct for reactive variables. The {/if} closing tag is present.

3. Final Answer:

   There is no error; the code is correct. -> Option D

4. Quick Check:

   Valid else if syntax and proper closure = A [OK]

Hint: Svelte supports {:else if} inside {#if} blocks [OK]

Common Mistakes:

• Thinking {:else if} is invalid syntax
• Forgetting {/if} closing tag
• Confusing let and const for reactive vars

5. You want to display a message only if a user is logged in and has admin rights. Which Svelte {#if} block correctly checks both conditions?

hard

A. {#if loggedIn && isAdmin} Welcome, admin! {/if}

B. {#if loggedIn || isAdmin} Welcome, admin! {/if}

C. {#if loggedIn} {:if isAdmin} Welcome, admin! {/if} {/if}

D. {#if loggedIn | isAdmin} Welcome, admin! {/if}

Solution

1. Step 1: Understand the condition requirements

   The message should show only if both loggedIn and isAdmin are true, so we need a logical AND.

2. Step 2: Evaluate each option's logic

   {#if loggedIn | isAdmin}

   Welcome, admin!

   {/if} uses | bitwise OR which shows if either is true (wrong). {#if loggedIn || isAdmin}

   Welcome, admin!

   {/if} uses || logical OR which means either can be true (wrong). {#if loggedIn} {:if isAdmin}

   Welcome, admin!

   {/if} {/if} uses invalid {:if} syntax. {#if loggedIn && isAdmin}

   Welcome, admin!

   {/if} uses && logical AND which requires both true (correct).

3. Final Answer:

   {#if loggedIn && isAdmin} <p>Welcome, admin!</p> {/if} -> Option A

4. Quick Check:

   Use && for both true conditions [OK]

Hint: Use && to require both conditions true in {#if} [OK]

Common Mistakes:

• Using || instead of && for both conditions
• Using bitwise | instead of logical &&
• Using invalid {:if} syntax