Blazor WASM Dynamic Component

Blazor WASM Dynamic Component

blazor

20 Articles

Improve

In this article, let's learn about <DynamicComponent> in Blazor.

Table of Contents

  1. What is Dynamic Component?
  2. How to use Dynamic Component in blazor?
  3. When to use Dynamic Component in blazor?
  4. Steps
  5. Summary

What is Dynamic Component in blazor?

As its name implies, <DynamicComponent> is a component that allows us to dynamically render components. The idea is that we pass the type of the component to render, and, optionally, its parameters, and voila, the component is rendered.

You don't need to iterate through components and use complex conditionals, use reflection, declare a bunch of RenderFragments, or even build your own render tree. It can get complicated when dealing with parameters and complex data graphs, and none of these solutions are any good, really.

How to use Dynamic Component in blazor?

To start using <DynamicComponent>, consider the following example

In the above example,

  • componentType specifies the type.
  • parameters specifies component parameters to pass to the componentType component.

Code Sample - Simple Dynamic Component

When to use Dynamic Component in blazor?

<DynamicComponent> is can be in following scenarios,

  • Dynamically Rendering Widget components in dashboard based on User Preference or UI Settings.
  • Dynamically generating forms from a JSON data stored in database.
  • Dynamically Rendering components based on user choice for different line of business. Example collecting data from user for type of insurance selected. Each insurance component can have different validations and business logics.

Let's try rendering simple input components based on user selection. Let's create 3 components.

A simple <input type="text" />

Code Sample - Text Box Component

A simple <input type="checkbox" />

Code Sample - Check Box Component

A simple <input type="radio" />

Code Sample - Radio Button Component

Steps

  1. Let's start by adding all the three components as option in <select> drop down and hook an @onchange="RenderComponent".
  2. When the user select's a choice from dropdown, we can get the component type in the @onchange event using event args as type = Type.GetType($"BlazorDemoComponents.{eventArgs.Value}");.
  3. Now <DynamicComponent> will render the selected component and pass the parameters using Parameters="@components[type.Name].Parameters". Here we are passing Label parameter to each input component using IDictionary<string, object> parameter.
  4. Note that Type is required parameter and Parameters is optional parameter in <DynamicComponent>.

Code Sample - Dynamically Rendering Input Components

Demo - Dynamically Rendering Input Components Demo

Scenario - Let's try rendering the input components dynamically

Summary

In this post, we walked through the new <DynamicComponent>, which allows you to render components when you don’t know your types at runtime. We were able to render a component based on what a user selects from a drop-down list. We also explored how to pass in parameters to the <DynamicComponent> as well.

  • Blazor
  • Dynamic
  • Component
  • Dynamically-rendered