Blazor's strong data binding features let developers link component properties or variables to UI components. 

 

One way binding: The @bind directive or data binding attributes let one-way data binding allow data to move from the component to the UI. Typically achieve one-way binding using the @ symbol in your Razor markup to display the value of a C# expression.

 

@page

<h1>Hello, @Greeting</h1>

@code {
   private string Greeting = "World";

   protected override async Task OnInitializedAsync()
   {
       await Task.Delay(2000);
       Greeting = "Blazor!";
       StateHasChanged(); // Notify Blazor to re-render the UI
   }
}

Can also use  [Parameter] attributes from a parent component to a child component for one-way binding 

Parent component

<ChildComponent Message="@parentMessage" />

@code {
   private string parentMessage = "Hello from parent!";
}

 

Child component

@page

<h3>@Message</h3>

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

 

 

Two-way data binding: Blazor also offers two-way data binding, which allows bi-directional data flow between the component and the UI, therefore enabling real-time updates in both directions. 

@page

<input @bind="name" />
<p>You entered: @name</p>

@code {
   private string name = "";
}

@bind="name": This directive on the <input> element establishes a two-way connection with the name property in the @code block.

 

 

Event binding: Blazor provides more sophisticated binding situations such event binding, which lets programmers link component methods to UI events, and expression binding, which enables binding to complex expressions or calculations. 

<input @bind="textValue" @bind:event="oninput" />
<p>You are typing: @textValue</p>

@code {
   private string textValue = "";
}