I ❤️ .NET

In this article, let's learn about how to communicate between components in Blazor WASM application.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Event Handling And Event Arguments.

Table of Contents

1. Component Parameters
2. Cascading Values and Parameters
3. Event Callbacks
4. State Container
5. Summary

Component Parameters

The simple and straight forward way is by passing values as Component Parameters. Component parameters pass data to components and are defined using public C# properties on the component class with the [Parameter] attribute.

<h4>Title: <b>@Title</b></h4>

<p>Description: <b>@Description</b></p>

@code {
    [Parameter] public string? Title { get; set; }
    [Parameter] public string? Description { get; set; }
}
        

Cascading Values and Parameters

Cascading values and parameters provide a convenient way to flow data down a component hierarchy from an ancestor component or parent component to any number of descendent components or child components. Unlike Component parameters, cascading values and parameters don't require an attribute assignment for each descendent component or child component where the data is consumed. Cascading values and parameters also allow components to coordinate with each other across a component hierarchy.

//App.Razor
<CascadingValue Value="SmallDevice">
  <Router ..>
    ..
  </Router>
</CascadingValue>  

@code {
  private bool SmallDevice = true;
}

//CascadingDemo.razor
<p>Viewing I ❤️ .NET On Mobile Device? : @(SmallDevice ? "Yes" : "No")</p>

@code {
    [CascadingParameter] public bool SmallDevice { get; set; }
}
        

Event Callbacks

EventCallback and EventCallback<T> are used to pass data from child component to parent component upon a certain event like button click. We can also assign synchronous or asynchronous methods and communicate to parent component using event callbacks along with data.

//Child.razor
<button @onclick="@(() => OnClick.InvokeAsync("Hello from Child Component"))">Click to get message from child component</button>

@code {
    [Parameter] public EventCallback<string> OnClick { get; set; }
}

//Parent.razor
<EventCallbackChildDemo OnClick="ClickHandler"></EventCallbackChildDemo>

<p>Message: <b>@message</b></p>

@code {
    string message = "Hello from Parent Component";

    void ClickHandler(string newMessage)
    {
        message = newMessage;
    }
}
        

State Container

This last method is the complex way to communicate between many components across the whole application. We need to register this state container as Scoped or Singleton service and inject the same and use it to store and pass data between components on any event.

//AppStateDemo.cs
public class AppStateDemo
{
    public event Action OnChange = default!;
    public readonly List<string> messages1 = new();
    public readonly List<string> messages2 = new();

    public void SendMessageToChat1(string message)
    {
        messages1.Add(message);
        NotifyStateChanged();
    }

    public void SendMessageToChat2(string message) 
    {
        messages2.Add(message);
        NotifyStateChanged();
    }
    
    private void NotifyStateChanged() => OnChange?.Invoke();
}

//Chat1Demo.razor
@inject AppStateDemo AppState;
@implements IDisposable;

@foreach (var message in AppState.messages1)
{
    <p>@message</p>
}

<button @onclick="SendMessage">Send Message to chat 2</button>

@code {
    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged;
    }

    void SendMessage()
    {
        AppState.SendMessageToChat2("Red");
    }
    
    public void Dispose()
    {
        AppState.OnChange -= StateHasChanged;
    }
}

//Chat2Demo.razor
@inject AppStateDemo AppState;
@implements IDisposable;

@foreach (var message in AppState.messages2)
{
    <p>@message</p>
}

<button @onclick="SendMessage">Send Message to chat 1</button>

@code {
    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged;
    }

    void SendMessage()
    {
        AppState.SendMessageToChat1("Red");
    }
    
    public void Dispose()
    {
        AppState.OnChange -= StateHasChanged;
    }
}

//StateContainer.razor
<Chat1Demo></Chat1Demo>
<Chat2Demo></Chat2Demo>

@code {
}

//Program.cs
services.AddScoped<AppStateDemo>();
        

Summary

In this article, we learn't how to Communicate between components in blazor WASM application using 4 different techniques. We started with simple straight forward Component Parameters and Cascading Parameters and then moved to EventCallback and finally to State Container. I would recommend to make use of simple straight forward ways unless you need a complex state container.