How to use bind-value and bind-value:event on a custom component Blazor

Question

In Blazor, while using inputs,

<input bind-value="@InputValue" bind-value:event="oninput"/>

This creates a 2 way binding that updates with the oninput event.

I would like to recreate this on a custom component with custom events and custom properties.

CustomInput.razor

<input value="@Value" oninput="@OnInput" />

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

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

I want to be able to use it this way.

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

Is this possible on Blazor right now? If yes, how do I achieve it?

EDIT:

For anyone that comes across this, it seems to work as is. I am not sure if the feature was added after the question was asked or if it always worked that way but the code above should work as is. Conventionally, your event name should be ValueChanged but if you have a reason to use another event name like in inputs where you have OnInput and OnChange, then you can use this format.

Answer 1

Yes Blazor supports 2 way binding. It works with EventCallbacks (which must be triggered) and default uses name convention based Events e.g.: {PropertyName}Changed. Also you can override this naming convention @bind-{Prop}:event="{EventCallbackName}". In your code example you are just overriding this default Event name, never triggering it.

In your code you have 2 issues:

1. You MUST define bind starting with @ and inside "" it is not necessary to use @ correct for is: @bind-{PropertyName}="{variable}".

Change your code to: <CustomInput @bind-value="InputValue" @bind-value:event="OnInput" />

2. Already wrote that these events MUST be triggered when actual value has changed. Update your code to:

private string _value;
[Parameter] public string Value 
{ 
   get => _value; 
   set
   {
      if(value == _value)
        return;

      _value = value;  
      if(OnInput.HasDelegate)
      {
         OnInput.InvokeAsync(_value);
      }  
   }
}