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.

[HeaderComponent.razor]

@using System.Globalization

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

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

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

@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

[index.razor]

@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

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

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

Please submit your question and answer.