Build reusable UI components with Blazor-Real World Example

One of the most appealing features of blazor is the ability to encapsulate reusable user interface (UI) code into reusable UI components. .razor files can be used to specify custom user components in markup.
This blog post will show you how to create a custom reusable component in blazor.
By the end of this blog, you will learn the following things.

• How to communicate between parent and child component.
• How to handle an event
• How to pass data from parent to child control.

I assume that you know blazor and how to create a run the blazor project.

We will build a custom select component that takes items as input and exposes one event, OnChange, that the parent component subscribes to get the currently selected value.

Let’s create a CustomSelect.razor component and paste the following code.

<select @onchange="OnChange">
    @foreach(var item in Items){
        <option>@item</option>
    }

</select>
@code {
    [Parameter] 
    public List<string> Items {get;set;}
    [Parameter]
    public EventCallback<ChangeEventArgs> OnChange { get; set; }
             
}

Let us understand the above code. There are two public properties with the attribute Parameter.Component properties must be marked with the [Parameter] attribute to pass data from parent to child.

To specify a component parameter in Blazor, use an attribute as shown in the following code snippet.

<CustomSelect Items="fruits"></CustomSelect>

In Blazor, you can register handlers for DOM UI events directly using directive attributes of the form @on{event} (in our case, it is @onchange. The {event} placeholder represents the name of the event. For example, you can listen for a select onchange event like this:

<select @onchange="OnChange">

Where OnChange is an event callback declared as follows in our custom component.

[Parameter]
    public EventCallback<ChangeEventArgs> OnChange { get; set; }

Event handlers can accept an optional, event-specific argument to provide more information about the event. For example, change events can take a ChangeEventArgs argument, but it is not required.

As you can see that I am only getting the selected value from the callback. You can simplify the above statement as shown below.

    [Parameter]
    public EventCallback<string> OnChange { get; set; }

To get the value from the custom component, you can create a method handler in which signatures must match with the custom component. In our case method accepts the argument. ChangeEventArgs.

    private void HandleChange(ChangeEventArgs a){
        Console.WriteLine(a);
        SelectedValue=a.Value.ToString();
    }

Instead of referring to a method group for an event handler, you can use a lambda expression. A lambda expression allows you to close over other in-scope values.

<CustomSelect  Items="fruits"  
	OnChange="(()=>SelectedValue=a.Value.ToString())">
</CustomSelect>

Now let us consume the component on our page.

<h1>Hello CodeGuru</h1>
<CustomSelect Items="fruits" OnChange="HandleChange"></CustomSelect>
<h2>You Selected ::@SelectedValue</h2>
@code{
    List<string> fruits=new List<string>();
    private string SelectedValue {get;set;}
    private void HandleChange(ChangeEventArgs a){
        Console.WriteLine(a);
        SelectedValue=a.Value.ToString();
    }
    protected override void OnInitialized(){
        fruits.Add("Apple");
        fruits.Add("Orange");
        fruits.Add("Kiwi");
        fruits.Add("Banana");
    }
}

Live Demo