04
- July
2020
Posted By : Rahul
Understanding about Cascading Values and Cascading Parameters in Blazor

10:18 PM

In this post, we will be understanding about Cascading Values and Cascading Parameters in Blazor framework. As we have already discussed about passing values from parent component to child components in Blazor using Component Parameters in our previous posts. Using component parameters is one way to pass data from parent to child. Blazor introduced another way for doing the same i.e. using cascading values and cascading parameters that we are going to discuss in detail in this post.

Table of Contents

  1. Cascading values and Parameters
  2. CascadingValue Component
  3. Accessing single Cascading Value using CascadingParameter attribute
  4. Passing multiple values of different types through CascadingValue component
  5. Accessing multiple values of different types using multiple CascadingParameter attributes
  6. Passing multiple values of same types using CascadingValue component
  7. Match by Type
  8. Match By Name
  9. Cascading Values Performance
  10. IsFixed Parameter and overcome performance issues
  11. Summary

You can download source code with examples explained from GitHub.

Cascading values and Parameters

As we already know Blazor framework is a component based framework and for creating a blazor application, components can be deeply nested.

For example. Component C can be nested inside component B and that component B can be nested inside another component A and so on. It means there can be several layers of components in a hierarchy in a real-time blazor application.

As I explained above, there is one way to pass data from an ancestor component (component A) to its descendant components (component B & C and more in hierarchy) using Component Parameters.

But using this way, it’s tedious to pass data to all descendant components. That’s why Blazor introduced cascading values and parameters that allows any data cascaded down to its all descendant components in components hierarchy.

Data can be cascaded down only means passed from Parent to Child components using cascading values and parameters. You cannot update a value from child component. If you want to update value from descendants, use Events.

cascading values and cascading parameters in blazor

CascadingValue Component

Blazor framework introduced a special component called CascadingValue that allows an ancestor component to pass data to its all descendants.

In the following example, Parent component TextColor property value is passed to the CascadingValue component.

ParentComponent.razor

<h2>Simple Usage of Cascading values and parameters</h2>

<button @onclick="ChangeColor">Change Text Color For All Descendants</button>
<p style="color: @TextColor">I'm parent with @TextColor color.</p>

<CascadingValue Value="@TextColor">
    <ChildComponent1></ChildComponent1>
    <ChildComponent2></ChildComponent2>
</CascadingValue>

@code{
    protected string TextColor { get; set; } = "Red";
    protected void ChangeColor()
    {
        TextColor = "Green";
    }
}

Accessing single Cascading Value using CascadingParameter attribute

Any Child component (descendants) in the component hierarchy can access the cascading value by declaring a property of same type decorated with the CascadingParameter attribute.

In the following example, Child component TColor property is declared with same type string and decorated with the CascadingParameter attribute.

ChildComponent1.razor

<p style="color:@TColor">I'm Child 1 with @TColor color.</p>

@code {
    [CascadingParameter]
    public string TColor { get; set; }
}

ChildComponent2.razor

<p style="color:@TColor">I'm Child 2 with @TColor color.</p>

@code {
    [CascadingParameter]
    public string TColor { get; set; }
}

As you can see in above example, both child components can access cascading value passed from parent component. Even if there was any other child component in hierarchy (nested of Child1 or Child2), those could also access the cascading value.

Let’s run the application and see the output. First color Red will be passed to child components and on button click, Green color will be passed to all descendants.

simple usage of cascading values and cascading parameters

Passing multiple values of different types through CascadingValue component

It is possible to pass more than one value to pass from ancestor component to its all descendants through CascadingValue component. In above example, we passed single value using Value property of CascadingValue component, which is fine when there is only one cascading parameter. What if you have to pass two or more value? For this type of scenario,  we can use nested CascadingValue components.

In the following example, Parent component has another property ColorChangedCounter which value needs to pass to its descendants.

ParentComponent.razor

<button @onclick="ChangeColor">Change Text Color For All Descendants</button>
<p style="color: @TextColor">I'm parent with @TextColor color. Text Color is changed @ColorChangedCounter time.</p>

<CascadingValue Value="@TextColor">
    <CascadingValue Value="@ColorChangedCounter">
        <ChildComponent1></ChildComponent1>
        <ChildComponent2></ChildComponent2>
    </CascadingValue>
</CascadingValue>

@code{
    protected string TextColor { get; set; } = "Red";
    protected int ColorChangedCounter { get; set; } = 1;
    protected void ChangeColor()
    {
        TextColor = "Green";
        ColorChangedCounter = ColorChangedCounter + 1;
    }
}

Accessing multiple values of different types using multiple CascadingParameter attributes

Child components can access multiple values by declaring multiple properties of same type decorated with CascadingParameter attribute.

In the following example, Child component ColorChangedCounter property is declared with same type string and decorated with the CascadingParameter attribute.

ChildComponent.razor

<p style="color:@TColor">I'm Child 1 with @TColor color. Text color is changed @ColorChangedCounter time.</p>

@code {
    [CascadingParameter]
    public string TColor { get; set; }

    [CascadingParameter]
    public int ColorChangedCounter { get; set; }
}

As you can see in above code example, child component can access ColorChangedCounter value by introducing another property with same type.

TextColor (in parent component) is mapped to TColor (in child component) because those are of same string type and ColorChangedCounter (in parent component) is mapped to ColorChangedCounter (in child component) because those are of same int type.

Let’s run the application and see the output.

multiple cascading parameters in blazor

Passing multiple values of same types using CascadingValue component

As of now in above examples we passed multiple values of different types (one is of string and other one is of int) using cascading value and accessed those values by declaring two properties of different types. But what if we have multiple values of same type to pass?

Match by Type

In this situation, Blazor framework is still going to match based on type only. But the framework will use the closest cascading value of ancestor component and will map the closest cascading value to the same type properties in the descendant components.

In the following example, Parent component has two properties of string type named TextColor & FontSize, whose values will be passed to descendants components.

ParentComponent.razor

<button @onclick="ChangeColor">Change Text Color For All Descendants</button>
<p style="color: @TextColor; font-size: @FontSize">I'm parent with @TextColor color with @FontSize font-size.</p>

<CascadingValue Value="@TextColor">
    <CascadingValue Value="@FontSize">
        <ChildComponent3></ChildComponent3>
    </CascadingValue>
</CascadingValue>

@code{
    protected string TextColor { get; set; } = "Red";
    protected string FontSize { get; set; } = "1em";
    protected void ChangeColor()
    {
        TextColor = "Green";
        FontSize = "2em";
    }
}

ChildComponent.razor

<p style="color:@TColor; font-size: @FontSize">I'm Child 1 with @TColor color with @FontSize font-size.</p>

@code {
    [CascadingParameter]
    public string TColor { get; set; }

    [CascadingParameter]
    public string FontSize { get; set; }
}

In above code example, framework will use the closest cascading value i.e. FontSize and will map it to same string type properties i.e. TextColor in the child component.

Let’s run the application and see the rendered output.

cascading parameters of same type in blazor

Match By Name

The most reliable way to identify cascading parameters is by name. You can give a name to your cascading value when you pass it using CascadingValue component from parent component and the child components can access this value by using same name.

Taking the same previous example, we can give name to both cascading values.

ParentComponent.razor

<button @onclick="ChangeColor">Change Text Color For All Descendants</button>
<p style="color: @TextColor; font-size: @FontSize">I'm parent with @TextColor color with @FontSize font-size.</p>

<CascadingValue Value="@TextColor" Name="ColorValue">
    <CascadingValue Value="@FontSize" Name="SizeValue">
        <ChildComponent4></ChildComponent4>
    </CascadingValue>
</CascadingValue>

@code{
    protected string TextColor { get; set; } = "Red";
    protected string FontSize { get; set; } = "1em";

    protected void ChangeColor()
    {
        TextColor = "Green";
        FontSize = "2em";
    }
}

ChildComponent.razor

<p style="color:@TColor; font-size: @FontSize">I'm Child with @TColor color with @FontSize font-size.</p>

@code {

    [CascadingParameter(Name = "ColorValue")]
    public string TColor { get; set; }

    [CascadingParameter(Name = "SizeValue")]
    public string FontSize { get; set; }
}

As you can see in above code example, we gave name ColorValue & SizeValue to both CascadingValue components and used these same names into CascadingParameter attribute Name property.

Let’s run the application and see the rendered output.

cascading parameters of same type using name in blazor

Cascading Values Performance

Blazor framework constantly monitors the cascading value that is being passed down to the child components (descendants) in the component tree. It means when the cascaded value is changed, then the new value will be sent down the component tree and all the child components in the tree that use the cascading value, will be updated. This constant monitoring requires resources and in a large blazor application it may cause performance issues.

IsFixed Parameter

CascadingValue component has IsFixed boolean parameter. By default the value of this parameter is False, You can set it to True. If you set it to true, if you want blazor not to monitoring the changes. 

In the following example, IsFixed parameter is set to true explicitly on first CascadingValue component. It means Blazor will not monitor TextColor property value for further changes and TextColor property new value will never reflect to child components excepting first time.

<CascadingValue Value="@TextColor" Name="ColorValue" IsFixed="true">
    <CascadingValue Value="@FontSize" Name="SizeValue">
        <ChildComponent4></ChildComponent4>
    </CascadingValue>
</CascadingValue>

@code{
    protected string TextColor { get; set; } = "Red";
    protected string FontSize { get; set; } = "1em";

    protected void ChangeColor()
    {
        TextColor = "Green";
        FontSize = "2em";
    }
}

Summary (Cascading values and cascading parameters in Blazor)

In this post, we covered each and everything about Blazor cascading values and cascading parameters in detail. We also covered about performance issues while using cascading value and parameters.

You can download the source code from here. Please share this post if you find it helpful.

Thank you 🙏 for reading this article. Keep Reading, Keep Growing, Keep Sharing 😃

If you found this article helpful,

BMC logoBuy me a coffee

Follow for Latest Posts –

Leave a Reply