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

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" />

  1. 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);
      }  
   }
}

Leave a Comment

tech