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"
       type="@(_showPassword ? "text" : "password")"
       value="@Password" />
<button class="btn btn-primary" @onclick="ToggleShowPassword">
    Show password
@code {
    private bool _showPassword;
    public string Password { get; set; }
    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.

Syncfusion Blazor Playground with Child Component

Removing a Child Component

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


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