Control Flow in Svelte: Using `#if`, `#else-if`, and `#else`

Introduction to Control Flow in Svelte

Welcome back! In the previous lesson, you learned how to use Svelte’s reactivity model with runes like $state and $derived to create dynamic and responsive components. Now, we’ll explore another essential feature of Svelte: control flow . Control flow allows you to conditionally render parts of your UI based on specific conditions, making your applications more interactive and user-friendly. In this lesson, we’ll focus on three key control flow structures: #if, #else-if, and #else . These blocks enable you to show or hide content dynamically, depending on the state of your application. For example, you might want to display a welcome message only if a user is logged in or show different content based on their role. To keep things simple, we’ll build on the reactivity concepts you’ve already learned, using $state to manage the conditions that control what gets rendered. Let’s dive in and see how these control flow blocks work in practice!

Understanding the `#if` Block

The #if block is the simplest form of control flow in Svelte. It allows you to conditionally render content based on a boolean expression. If the expression evaluates to true, the content inside the #if block is displayed; otherwise, it’s hidden. Here’s a basic example: Svelte <script lang="ts"> let isVisible = $state(false); </script> {#if isVisible} <p>This message is visible!</p> {/if} <button onclick={() => isVisible = !isVisible}> Toggle Visibility </button> In this example, the isVisible state variable controls whether the paragraph is displayed. Clicking the button toggles the value of isVisible, showing or hiding the message. This is a simple yet powerful way to control what your users see based on the state of your application.

Adding `#else-if` and `#else` Blocks

While #if is great for simple conditions, you’ll often need to handle multiple conditions. This is where #else-if and #else come in. The #else-if block allows you to check additional conditions if the previous #if or #else-if block evaluates to false . The #else block provides a fallback for when none of the conditions are met. Let’s look at an example where we display different messages based on a user’s role: Svelte <script lang="ts"> let userRole = $state<'admin' | 'editor' | 'viewer' | null>(null); </script> {#if userRole === 'admin'} <p>Welcome, Admin! You have full access.</p> {:else if userRole === 'editor'} <p>Welcome, Editor! You can create and edit content.</p> {:else if userRole === 'viewer'} <p>Welcome, Viewer! You can view content.</p> {:else} <p>Please log in to access the system.</p> {/if} In this example, the message displayed depends on the value of userRole . If userRole is null, the #else block ensures a default message is shown. This structure makes it easy to handle complex logic while keeping your code clean and readable.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Real-World Example: Login System

Now that you understand the basics of control flow, let’s apply these concepts to a real-world example: a login system. The code provided earlier demonstrates how to use #if, #else-if, and #else to manage login states and user roles. Here’s the code again for reference:

Svelte

<script lang="ts">
  let isLoggedIn = $state(false);
  let userRole = $state<'admin' | 'editor' | 'viewer' | null>(null);

  function login(role: 'admin' | 'editor' | 'viewer') {
    isLoggedIn = true;
    userRole = role;
  }

  function logout() {
    isLoggedIn = false;
    userRole = null;
  }
</script>

{#if !isLoggedIn}
  <h1>Welcome! Please log in.</h1>
  <button onclick={() => login('viewer')}>Log in as Viewer</button>
  <button onclick={() => login('editor')}>Log in as Editor</button>
  <button onclick={() => login('admin')}>Log in as Admin</button>
{:else}
  {#if userRole === 'admin'}
    <h1>Welcome, Admin! You have full access.</h1>
  {:else if userRole === 'editor'}
    <h1>Welcome, Editor! You can create and edit content.</h1>
  {:else if userRole === 'viewer'}
    <h1>Welcome, Viewer! You can view content.</h1>
  {/if}
  <button onclick={logout}>Log out</button>
{/if}

<style>
  h1 {
    color: green;
  }
  button {
    padding: 10px;
    margin: 5px;
    cursor: pointer;
  }
</style>

<script lang="ts">
  let isLoggedIn = $state(false);
  let userRole = $state<'admin' | 'editor' | 'viewer' | null>(null);

  function login(role: 'admin' | 'editor' | 'viewer') {
    isLoggedIn = true;
    userRole = role;
  }

  function logout() {
    isLoggedIn = false;
    userRole = null;
  }
</script>

{#if !isLoggedIn}
  <h1>Welcome! Please log in.</h1>
  <button onclick={() => login('viewer')}>Log in as Viewer</button>
  <button onclick={() => login('editor')}>Log in as Editor</button>
  <button onclick={() => login('admin')}>Log in as Admin</button>
{:else}
  {#if userRole === 'admin'}
    <h1>Welcome, Admin! You have full access.</h1>
  {:else if userRole === 'editor'}
    <h1>Welcome, Editor! You can create and edit content.</h1>
  {:else if userRole === 'viewer'}
    <h1>Welcome, Viewer! You can view content.</h1>
  {/if}
  <button onclick={logout}>Log out</button>
{/if}

<style>
  h1 {
    color: green;
  }
  button {
    padding: 10px;
    margin: 5px;
    cursor: pointer;
  }
</style>

In this example, the #if block checks whether the user is logged in. If not, it displays a welcome message and login buttons. Once logged in, the #else block shows a personalized message based on the user’s role. The logout button allows the user to log out, resetting the state.