svelte:component for dynamic components - Mini Project: Build & Apply

Dynamic Component Rendering with <code>svelte:component</code>

📖 Scenario: You are building a simple Svelte app that shows different greeting messages depending on the user's mood. Each mood has its own small component that displays a unique message.

🎯 Goal: Build a Svelte app that uses svelte:component to dynamically render one of three greeting components based on a selected mood.

📋 What You'll Learn

Create three Svelte components named Happy.svelte, Sad.svelte, and Excited.svelte with distinct greeting messages.

Create a main App.svelte file that holds the current mood in a variable called currentMood.

Use a configuration variable components that maps mood names to their respective components.

Use svelte:component in App.svelte to render the component matching currentMood.

Add buttons to change currentMood dynamically.

💡 Why This Matters

🌍 Real World

Dynamic component rendering is useful in apps where the UI changes based on user choices or data, such as dashboards, forms, or multi-step wizards.

💼 Career

Understanding <code>svelte:component</code> helps you build flexible and maintainable Svelte apps that adapt to user input or external data, a common requirement in frontend development jobs.

1

Create the greeting components

Create three Svelte components named Happy.svelte, Sad.svelte, and Excited.svelte. Each component should export a default component that renders a <h2> with these exact texts respectively: "I am feeling happy!", "I am feeling sad.", and "I am feeling excited!".

Svelte

// Create Happy.svelte
// Create Sad.svelte
// Create Excited.svelte

 with the exact text -->

Hint

Each component is a simple Svelte file with an <h2> tag containing the exact text.

2

Set up the mood state and components map in App.svelte

In App.svelte, import the three components Happy, Sad, and Excited. Create a variable called currentMood and set it to the string "Happy". Then create a constant object called components that maps the strings "Happy", "Sad", and "Excited" to their respective imported components.

Svelte

// Import Happy, Sad, Excited components
// Create variable currentMood = "Happy"
// Create constant components mapping moods to components

// Your code here

Hint

Use import statements for each component. Then create currentMood as a string and components as an object mapping mood names to components.

3

Render the dynamic component using svelte:component

In App.svelte, use the <svelte:component> tag to render the component that matches the current mood. Use the this attribute with the value components[currentMood].

Svelte

  import Happy from './Happy.svelte';
  import Sad from './Sad.svelte';
  import Excited from './Excited.svelte';

  let currentMood = "Happy";

  const components = {
    Happy: Happy,
    Sad: Sad,
    Excited: Excited
  };

Hint

Use <svelte:component this={components[currentMood]} /> to render the chosen component.

4

Add buttons to change the mood dynamically

Below the dynamic component in App.svelte, add three <button> elements labeled exactly Happy, Sad, and Excited. Each button should have an on:click event that sets currentMood to the respective mood string.

Svelte

  import Happy from './Happy.svelte';
  import Sad from './Sad.svelte';
  import Excited from './Excited.svelte';

  let currentMood = "Happy";

  const components = {
    Happy: Happy,
    Sad: Sad,
    Excited: Excited
  };

Hint

Add three buttons with on:click handlers that update currentMood to the exact mood strings.