Component Communication & DI
Pass data between parent and child components, use cascading parameters, and inject services into components.
Component Communication Patterns
Blazor components communicate in three directions: parent to child (Parameters), child to parent (EventCallback), and across the tree (CascadingParameters or shared services via DI).
Parent to Child: Parameters
Decorate a component property with [Parameter] to make it settable from the parent. The parent passes values as HTML attributes on the component tag.
@* Child: Alert.razor *@
<div class="alert alert-@Type">
@Message
</div>
@code {
[Parameter] public string Type { get; set; } = "info"; // primary, warning, danger
[Parameter, EditorRequired] public string Message { get; set; } = "";
}
@* Parent usage: *@
<Alert Type="danger" Message="Something went wrong!" />
<Alert Message="Record saved." />All lessons in this course
- Blazor Component Model
- Data Binding & Event Handling
- Component Communication & DI
- State Management in Blazor