Blazor WASM Communication Between Components

Blazor WASM Communication Between Components

blazor

20 Articles

Improve

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

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.

Code Sample - Component Parameters Demo

Demo - Component Parameters Demo

In this example you can pass Title and Descripiton to component using Component Parameters.

  1. Add [Parameter] attribute to component property.
  2. Pass data to component explicitly or assign a variable from ancestor or parent component.

Title: Component Parameter

Description: Communication using Component Parameter

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.

Code Sample - Cascading Values and Parameters Demo

Demo - Cascading Values and Parameters Demo

In this example you can get Cascading Value from ancestor component or parent component. The following component binds the SmallDevice cascading value from App.razor to a cascading parameter, optionally using the same name of SmallDevice. The parameter is used by I ❤️ DotNet to identify the device.

  1. Pass <CascadingValue> Value="SmallDevice" from ancestor or parent component
  2. Add [CascadingParameter] attribute to component property and give the same name to property.

Viewing I ❤️ .NET On Mobile Device? : Yes

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.

Code Sample - Event Callbacks Demo

Demo - Event Callbacks Demo

In this example you can click on button in Child Component and this will invoke OnClick EventCallback<string> from child component and pass the message from child component to parent component.

  1. Add [Parameter] public EventCallback<string> OnClick { get; set; } to child compnent.
  2. Then on any event invoke OnClick.InvokeAsync("Hello from Child Component") from child component.
  3. Render <EventCallbackChildDemo OnClick="ClickHandler"></EventCallbackChildDemo> from parent component and bind ClickHandler.
  4. Now click on button from Child Component.

Message: Hello from Parent Component

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.

Code Sample - State Container Demo

Demo - State Container Demo

In this example you can see the usage of State Container - AppStateDemo used to communicate between two components.

  1. Create a AppStateDemo.cs class with event and Action and methods to notify changes. This class stores messages and there is also an OnChange event which will be needed by components to store message.
  2. Register services.AddScoped<AppStateDemo>(); in Program.cs as Scoped or Singleton service.
  3. @inject AppStateDemo AppStateDemo in chat components to send message on button click.
  4. StateContainer component ties chat component together. Chat component handles OnChange event exposed by AppStateDemo class. Whenever messgae is sent StateHasChanged will be invoked and the chat component will re-render new messages.
  5. Please note that it's important to unsubscribe components StateHasChanged method from AppStateDemo's OnChange event using IDisposable interface else this will introduce a memory leak.

Chat 1
Chat 2

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.

  • Blazor
  • Communication
  • Component Parameter
  • Cascading Value
  • Cascading Parameter
  • Event Callback
  • State Container