We need to tell Blazor that the consuming page wants to use two-way binding.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.
Two-way binding in Blazor uses a naming convention. If we want to bind to a property named SomeProperty
, then we need an event call-back named SomeProperyChanged
. This call-back must be invoked any time the component updates SomeProperty
.
SecondComponent.razor
<h3>SecondComponent</h3> <button @onclick="Callback">Increment</button> @code { [Parameter] public int CounterValue { get; set; } [Parameter] public EventCallback<int> CounterValueChanged { get; set; } private async Task Callback() { if (CounterValue >= 20) { // reset counter CounterValue = 0; } else { CounterValue++; } // fire event await CounterValueChanged.InvokeAsync(CounterValue); } }
Counter.razor
@page "/counter" <SecondComponent @bind-CounterValue="counter"></SecondComponent> <p>@counter</p> @code { private int counter = 2; }
References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-6.0#binding-with-component-parameters
https://blazor-university.com/components/two-way-binding/
https://stackoverflow.com/questions/57932850/how-to-make-two-way-binding-on-blazor-component