Live Chat Icon For mobile
Live Chat Icon

How do you use bind-value and bind-value:event on a custom component?

Platform: Blazor| Category : Components, Event handling

We can specify what event the bind attribute should use to handle updating the value. But, in components, we need to define the event in the child component, for example, the oninput event on the child component, which triggers a method to update the value and invokes the ValueChanged EventCallback. The parent component has also been updated to use bind-Value when passing its Value parameter to the child component.

In the sample, we’re able to type in the text box on the parent component, both the values will be updated on every input change since we have bound the oninput event.

[CustomInput.razor]

<input value="@Value" @oninput="@OnInputChange" />
<h4>Welcome to Blazor Application, @Value</h4>

@code {
    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
    private async Task OnInputChange(ChangeEventArgs args )
    {
        Value = (string)args.Value;
        await ValueChanged.InvokeAsync(Value);
    }
}
[Index.razor]

@page "/"

<CustomInput @bind-Value="@InputValue" @bind-Value:event="ValueChanged"></CustomInput>

@code { 
       public string InputValue = "Example";
}

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.