Live Chat Icon For mobile
Live Chat Icon

How do I create a custom component?

Platform: Blazor| Category: Components

You can create custom components in Blazor and reuse them across the application. You can also create a razor component in a shared or custom folder, and define it. Then, the custom component like HTML tag (FileName) can be used in the application.


@using System.Globalization

<h1 style="font-weight:@fontweight !important">@_headingText</h1>

     <input type="checkbox" id="fontweight"
               @bind="bold" />
      <label class="form-check-label"
               for="italicsCheck">Use Bold</label>

<button type="button" class="btn btn-primary" @onclick="UpdateHeading">
        Update Font</button>

@code {
    private static TextInfo _tinfo = CultureInfo.CurrentCulture.TextInfo;
    private string _headingText =
        _tinfo.ToTitleCase("welcome to blazor!");
    private string _headingFontStyle = "normal";
    private bool bold = false;
    private int fontweight = 500;
    public void UpdateHeading()
        //weight = 900;
        fontweight = bold ? 900 : 500;

 //parent component


@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<HeaderComponent />

In the above example, the header component is used in the index page. Similarly, the component can be shared across the application as a HTML tag to improve code reusability.

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.