Techie BabajiLearn to Code. Build Real Skills.
Blazor · App Structure

Component Communication

Real UIs are many components working together. Choosing the right communication pattern keeps them simple and predictable.

Intermediate 5 min Lesson 16 of 31Examples target .NET 9 Blazor Web App.
Before you start:Component Parameters
0/31 in Blazor
On this page · 5 min · Intermediate

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 29, 2026

Related tutorials

Interview questions

Learning objectives#

  • Send data down with parameters
  • Send events up with EventCallback
  • Share values with cascading parameters
  • Coordinate siblings with a state service

Explanation#

Parent → child: parameters.

Child → parent: an EventCallback<T> parameter. The child calls InvokeAsync(value); the parent handles it and re-renders automatically.

Ancestor → many descendants: <CascadingValue Value="theme"> and [CascadingParameter] in descendants.

Unrelated components (header cart badge and product page): a scoped state service with an OnChange event both subscribe to.

Code example: A rating child notifying its parent#

Razor / MarkupComponents/StarRating.razor Illustrative
@for (var i = 1; i <= 5; i++)
{
    var star = i;
    <button type="button" aria-label="@($"{star} stars")" @onclick="() => Select(star)">
        @(star <= Value ? "★" : "☆")
    </button>
}


@code {
    [Parameter] public int Value { get; set; }
    [Parameter] public EventCallback<int> ValueChanged { get; set; }


    private Task Select(int stars) => ValueChanged.InvokeAsync(stars);
}


@* Parent: two-way binding works because of Value + ValueChanged *@
@* <StarRating @bind-Value="review.Stars" />  <p>You chose @review.Stars stars</p> *@
Expected output
Clicking the fourth star shows ★★★★☆ and the parent text updates to “You chose 4 stars”.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

  1. Value comes down from the parent.
  2. Clicking calls ValueChanged.InvokeAsync with the new rating.
  3. Value + ValueChanged lets the parent use @bind-Value.
  4. The local copy star avoids capturing the loop variable i.

Real-world use case#

Reusable inputs (ratings, date pickers, quantity selectors) that work with @bind-Value like built-in inputs.

Common mistakes#

Using Action instead of EventCallback

EventCallback re-renders the parent automatically and supports async.

Cascading frequently changing values to huge trees

Every change re-renders all subscribers. Use IsFixed="true" for values that never change.

Best practices#

  • Parameters down, EventCallback up
  • Implement Value/ValueChanged for bindable components
  • Use state services for distant components
  • Unsubscribe from service events in Dispose

Remember this#

Down: [Parameter]. Up: EventCallback.

Value + ValueChanged = @bind-Value support.

Siblings: shared scoped service with OnChange.

Practice exercise#

Your task: Write a CartState service that raises OnChange when an item is added.

Show solution
C# Illustrative
public class CartState
{
    public List<string> Items { get; } = [];
    public event Action? OnChange;
    public void Add(string item) { Items.Add(item); OnChange?.Invoke(); }
}

Mini quiz#

Component Communication quizMultiple choice Question 1 of 1

Which type should a child use to notify its parent?

Score so far: 0/0

Want more? Practise all Blazor MCQs · Blazor interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.