Build Blazor components dynamically without .Razor file

As we all know when we need to build a new component in Blazor we create a new Blazor file using the default template which will create a new file with the extension of .razor. this file contains two main parts, one for the writing the HTML code and the other one is dedicated for the code part.

In deed we can create a Blazor component without creating a .razor file, only using a basic .cs file, in which there is no dedicated part for the HTML part (the razor syntax). so in this way we can create even the HTML part dynamically without directly writing it in normal HTML code.

Why we need to do that? what is the advantages of doing so?

Blazor .razor file allow inheritance only for the c# code, using the @inherits directive, the HTML code is not inherited, the other point is that we can’t do dynamic creation of the component using conventional method. but using the .cs method we can do all of that.

using the dynamic method to create a new component opens a vast variation of possibilities.

How to do that?

First of all, create a new .cs file, then make your file inherits ComponentBase, then Override the method BuildRenderTree. this is the method that we need in order to dynamically create the HTML part of the component.

For the sake of this tutorial, I will create a dynamic Heading component that will get rendered to H1/H2/H3..etc according to the property value that will be assigned to the heading type.

the first step is like i have mentioned is to create a new .cs file that I have named it HeadingComponent.cs and wrote this code inside it

public class HeadingComponent : ComponentBase
    {
        [Parameter]
        public HeadingType HeadingType { get; set; } = HeadingType.H3;

        [Parameter]
        public string? CssClasses { get; set; }

        [Parameter]
        public RenderFragment? ChildContent { get; set; }
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            int index = 1;
            builder.OpenElement(index++, Enum.GetName(HeadingType)!.ToString());
            builder.AddAttribute(index++, "class", CssClasses);
            builder.AddContent(index++, ChildContent);
            builder.CloseComponent();
        }
    }

    public enum HeadingType
    {
        H1,
        H2,
        H3,
        H4,
        H5,
        H6
    }

and now I can consume this component in like any other Blazor component

<HeadingComponent HeadingType="HeadingType.H2" CssClasses="TestClass">Heading 1 example</HeadingComponent>

The component will get rendered in the browser like that

<h2 class="TestClass">Heading 1 example</h2>

As you can see, normally for such tasks if we need to render a new HTML tag we have to create a new component for that tag (<h1>, <h2>..etc), but using this we code only one component to render multiple components that follow the same logic.

I hope you have enjoyed this tutorial, and see you next time with another Blazor tip.