How to Dynamically Render a Component in a Blazor Application
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (178).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (223)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (225)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (936)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (162)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (156)Chart  (138)Chart of the week  (53)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (67)Development  (650)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (6)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (12)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (607)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
How to Dynamically Render a Component in a Blazor Application

How to Dynamically Render a Component in a Blazor Application

In Blazor, we typically use either RenderTreeBuilder or Razor syntax (RenderFragment) to create dynamic components. In the classic approach, we check for the data type or for a condition to dynamically render a component. This necessitates manually maintaining the component’s state of visibility based on whether the component should be displayed or hidden, which is more complicated for complex data.

Beginning with .NET 6 Preview 1, the ASP.NET Core team introduced DynamicComponent. The use of DynamicComponent greatly reduces the complexity of dynamic component rendering when dealing with large amounts of complex data.

What is DynamicComponent?

DynamicComponent is a new built-in Blazor component that can be used to render dynamic components using its type and optional parameters. Let’s take a look at it with some code examples!

<DynamicComponent Type="@someType" />

The optional Parameters property is used to define the component properties as dictionary.

<DynamicComponent Type="@someType" Parameters="@param" />

@code {

  public Dictionary<string, object> param { get; set; }


Let’s see DynamicComponent in action.

Developing an expense tracker application

For this blog, we have developed an expense tracker application with dynamically created components by specifying their type.

A DropDownList contains four options for dynamically displaying the expense report. We render the expense tracker pages using several Syncfusion Blazor UI components.


Refer to the Getting Started with Syncfusion Blazor Components in Blazor Server-Side App in Visual Studio 2019 documentation. It will provide a step-by-step procedure to create a Blazor server application and configure it with Syncfusion Blazor components.

The Blazor DropDownList includes object value binding support, allowing us to bind the data source object to the Value property. We obtain the name of the component class using the nameof() method and set it directly to the Type property of DynamicComponent by using the Type.GetType() method. Since we bind the data in the DropDownList, any change in the DropDownList component values will automatically update the DynamicComponent.

Refer to the following code example:

<SfDropDownList DataSource="@componentList" @bind-Value="@componentValue">
   <DropDownListFieldSettings Text="ComponentName" Value="ComponentType"></DropDownListFieldSettings>

<DynamicComponent Type="@(Type.GetType(componentValue.ComponentType))" Parameters="@componentValue.Param" />

@code {

    private Components componentValue { get; set; }
    public class Components
        public string ComponentName { get; set; }

        public string ComponentType { get; set; }

        public Dictionary<string, object> Param { get; set; }
   protected override async Task OnInitializedAsync()
        this.componentList = new List<Components>()
            new Components() { ComponentName = "Total Expenses", ComponentType = typeof(ExpPieChart).AssemblyQualifiedName, Param = new Dictionary<string, object>() { { "ExpenseData", ExpenseData } } }

            . . . 

            . . .
        this.componentValue = componentList[0];
        await base.OnInitializedAsync();
Dynamically rendering a component in a Blazor application
Dynamically rendering a component in a Blazor application


For more information, refer to the How to render dynamic components in Blazor application project demo.


Thank you for reading! In this article, we demonstrated how to use DynamicComponent in a Blazor server application to dynamically render new components. We also explained some details about sending parameters to the DynamicComponent.

Essential Studio for Blazor offers the largest collection of components for the Blazor platform. It has popular components like ChartsDataGridSchedulerDiagramWord Processor, and Maps. It also includes unique file-format libraries for manipulating ExcelWordPDF, and PowerPoint files. Use them to build world-class applications!

Also, try our Blazor components by downloading a free 30-day trial, or check out our NuGet package. Feel free to peruse our online examples and documentation to explore other available features.

If you have questions, you can also contact us through our feedback portalsupport forums, or Direct-Trac. We are always happy to assist you!

If you enjoyed reading this blog, then we think you shouldn’t miss the following,


Share this post:

Comments (1)

For example: I want to put @ref attiribute to ExpPieChart component which created by dynamic component. How to do that?

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Syncfusion Ad