How do you pass values from child to parent using EventCallBack in Blazor?

Platform: Blazor| Category : Components, Event handling

To pass values from a child to a parent component, see the following.

Parent component

[Parent.razor]
@page "/ParentComponent"

<h1>Parent Component</h1>

<ChildComponent @bind-Password="_password" />

@code {
    private string _password;
 }

Child component

[ChildComponent.razor]
<h1>Child Component</h1>

Password:

<input @oninput="OnPasswordChanged"
       required
       type="@(_showPassword ? "text" : "password")"
       value="@Password" />

<button class="btn btn-primary" @onclick="ToggleShowPassword">
    Show password
</button>
@code {
    private bool _showPassword;
    [Parameter]
    public string Password { get; set; }
    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        Password = e.Value.ToString();

        return PasswordChanged.InvokeAsync(Password);
    }
    private void ToggleShowPassword()
    {
        _showPassword = !_showPassword;
    }
}

Reference link:  https://docs.microsoft.com/en-us/aspnet/core/blazor/data-binding#child-to-parent-binding-with-chained-bind

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.