Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 602
dozieogbo Avatar asked Nov 22 '19 06:11

dozieogbo


People also ask

How do you bind input value in Blazor?

Bind a property or field on other Document Object Model (DOM) events by including an @bind:event="{EVENT}" attribute with a DOM event for the {EVENT} placeholder. The following example binds the InputValue property to the <input> element's value when the element's oninput event is triggered.

How do you bind a label to value in Blazor?

You can use the bind attribute on any element to bind the value. In blazor, we'll have a property assigned some value in the functions and use the property in the HTML template. Let's get this done. So, when we run the app, the label tag will display “red” as a text in the label.

What does @bind do Blazor?

To use two-way binding on a parameter simply prefix the HTML attribute with the text @bind- . This tells Blazor it should not only push changes to the component, but should also observe the component for any changes and update its own state accordingly.


2 Answers

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);
      }  
   }
}
like image 128
Major Avatar answered Oct 09 '22 14:10

Major


The event parameter MUST be called ValueChanged

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

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

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

Read Binding with component parameters

like image 41
agua from mars Avatar answered Oct 09 '22 13:10

agua from mars