Blazor Component Parameters Explained

Blazor components become reusable when they can receive data from their parent components. The [Parameter] attribute provides the standard way to pass values into a component.

📦 Create a Parameter

@code {
    [Parameter]
    public string Title { get; set; } = "";
}

The component can then render the value:

<h2>@Title</h2>

👨‍👩‍👧 Parent to Child

A parent component can provide the value:

<MyCard Title="Welcome to Algolassi" />

This keeps the child component reusable because the parent controls the data.

🔢 Typed Parameters

@code {
    [Parameter]
    public int Count { get; set; }
}

Typed parameters make the component contract clearer and allow the compiler to catch many incorrect usages.

🔄 Passing Complex Objects

@code {
    [Parameter]
    public Customer? Customer { get; set; }
}

Components can receive model objects, collections, and other application-specific types.

📢 EventCallback for Child-to-Parent Communication

When a child needs to notify its parent, EventCallback is commonly used:

@code {
    [Parameter]
    public EventCallback OnSave { get; set; }

    private async Task Save()
    {
        await OnSave.InvokeAsync();
    }
}

🧠 Key Takeaway

Parameters define how a Blazor component receives data, while EventCallback provides a clean way for a child component to notify its parent.

Continue with 🔥 Blazor Tutorials.

🤖 AlgoLassi Assistant Have a question about this tutorial?

Ask AlgoLassi and get an answer plus the tutorials worth studying next.

Ask a question

💬 Comments

Comments will appear here when available.