Share Data Between Child And Parent Components In Blazor

<div class="float-right">
    <i>Total Characters : @TextLength/@LengthString</i>
</div>
<div class="form-group row mb-2">
    <label class="col-md-3 col-form-label" for="Name">@FieldName</label>
    <div class="col-md-7">
        <input class="form-control" type="text" placeholder="@FieldName" value="@Value" @oninput="OnValueChanged" maxlength="@MaxLength" />
    </div>
</div>

@code {
    [Parameter]
    public string Value { get; set; }
    [Parameter]
    public string FieldName { get; set; }
    [Parameter]
    public int MaxLength { get; set; } = -1;
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
    string LengthString;
    int TextLength;
    protected override void OnInitialized()
    {
        TextLength = Value.Length;
        LengthString = (MaxLength == -1) ? "Unlimited" : MaxLength.ToString();
    }
    private Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();
        TextLength = Value.Length;
        return ValueChanged.InvokeAsync(Value);
    }
}

We have created an “OnValueChanged” method and bound it with the “@oninput” attribute of input control in HTML markup.

CustomTextbox.razor

<div class="float-right">
    <i>Total Characters : @TextLength/@LengthString</i>
</div>
<div class="form-group row mb-2">
    <label class="col-md-3 col-form-label" for="Name">@FieldName</label>
    <div class="col-md-7">
        <input class="form-control" type="text" placeholder="@FieldName" value="@Value" @oninput="OnValueChanged" maxlength="@MaxLength" />
    </div>
</div>
@code {
    [Parameter]
    public string Value { get; set; }
    [Parameter]
    public string FieldName { get; set; }
    [Parameter]
    public int MaxLength { get; set; } = -1;
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
    string LengthString;
    int TextLength;
    protected override void OnInitialized()
    {
        TextLength = Value.Length;
        LengthString = (MaxLength == -1) ? "Unlimited" : MaxLength.ToString();
    }
    private Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();
        TextLength = Value.Length;
        return ValueChanged.InvokeAsync(Value);
    }
}

We can add this child component inside a parent component. We can create a new parent component.

ParentComponent.razor

@page "/parentcomponent"
<CustomTextbox @bind-Value="name" FieldName="Name" MaxLength="20" />
<CustomTextbox @bind-Value="address" FieldName="Address" />
@code {
    string name = "Sarath Lal";
    string address = "Kakkanad";
}

We have added two custom textbox child components inside this parent component. “@bind-{parametername}” is used for binding the child component field with the parent component field. Here, “Value” is the field name in the child component. So, we used this as “@bind-Value”. We can pass these two input parameters “FieldName” and “MaxLength” from the parent component. I have not passed the MaxLength property for the second child component. Hence, the default value -1 will be assigned to this component in run time.

We can modify the shared component “NavMenu” to add a navigation to the parent component.

NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlazorReusableComponent</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="parentcomponent">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Parent Component
            </NavLink>
        </li>
    </ul>
</div>
@code {
    bool collapseNavMenu = true;
    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

We can run the application.

You can notice that a new “Parent Component” link appears in the menu. You can click that link to see the parent component.

We have defined two custom textbox components inside the parent component. For the first textbox, we have given a 20-character limit and for the second component, no character limit is given. So that, you can enter unlimited characters in the second textbox. The total character count is also visible on the screen.

Conclusion

In this post, we have created a reusable child component in Blazor and easily used in another parent component. We have shared the data from the parent component with the child component and vice versa also.