Working with components in Blazor Playground

21 Feb 20241 minute to read

Adding a Child Component

• Click the “+” button to add a new component.
• Name the component in the input box.
• Add the corresponding code within the child component file (e.g., .razor).

For example, ChildComponent.razor

<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;
    }
}

• The __Index.razor file is the main file for the Blazor playground application. To view the outcome of the child component, refer the child component in the __Index.razor file.

<h1>Parent Component</h1>

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

@code {
    private string _password;
}

• Press the Run button to execute the code and see the component rendered.

Removing a Child Component

Click the delete icon next to the child component in the Playground.

NOTE

The Playground doesn’t automatically remove references from __Index.razor. Manually update the file to reflect the deletion.