Rendering dynamic content in Blazor Wasm using DynamicComponent

Rendering dynamic content in Blazor Wasm using DynamicComponent

Rendering dynamic content in Blazor Wasm using DynamicComponent. In this article, we'll see how to use the new DynamicComponent from .NET 6 to render dynamically content and to avoid tight coupling between page and component. Blog with different types of content intermixed.

Sometimes we need to load different types of components dynamically. This is especially needed in scenarios where we cannot define a general structure e.g. in a blog with different types of content intermixed. Previously, we needed a big switch statement to check for different types and explicitly write out each of the components that we could potentially render. This created tight coupling between the page that renders the components and the components themselves. In this article, we will see how to use the new DynamicComponent from .NET 6 to render dynamic content.

Prerequisites

This feature was first introduced in .NET 6 preview 2 so to use this feature you need to install this version of .NET 6 or newer. It can be downloaded following this link:  Download .NET 6

For the best developer experience, you also need the newest preview version of Visual Studio. Visual Studio Preview can be downloaded here:  Download Visual Studio Preview

blazor

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Select List in Blazor || DropDown List in Blazor

LIKE | COMMENT | SHARE | SUBSCRIBE In this Blazor Tutorial, I will show you how to use #DropDownList in blazor app using MatBlazor - (Material Design compone...

Blazor : Calling REST API ASP NET Core Blazor | WEB API

LIKE | COMMENT | SHARE | SUBSCRIBE How to call and consume a REST API from ASP.NET Core Blazor application. Blog : https://aspdotnetexplorer.blogspot.com/sea...

Call POST API ASP NET Core Blazor | Blazor CRUD using API Part-1

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to save data into database using Web API form Asp.Net Core Blazor #Webassembly appli...

Call GET API ASP NET Core Blazor | Blazor CRUD using API Part-2

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to get all data from database using Web API form Asp.Net Core Blazor #Webassembly ap...

Call PUT API ASP NET Core Blazor | Blazor CRUD using API Part-3

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to update data from database using Web API form Asp.Net Core Blazor #Webassembly app...