Parameter

✅ Similar to Blazor WebAssembly

Parameter is a feature for transmitting data from a parent component to its direct child components.

• Passing parameters with Parameter.
• Capture unmatched values.
• Common mistake.
• Detect changes.

You can download the example code used in this topic on GitHub.

Passing parameters using Parameter

The following steps will guide you on how to pass parameters from a parent component to a child component in Blazor:

1. In your child component, declare public properties that will receive the parameters passed from the parent component. You can use the [EditorRequired] attribute to mark a parameter as required. Additionally, you can set default values for the parameter by defining it in the getter and setter.

@code {
    [Parameter]
    public string InputParameter { get; set; } = "Default Value";

    [EditorRequired]
    [Parameter]
    public string RequiredInputParameter { get; set; } = "";
}

2. In your parent component, declare public properties that will be passed to the child component as parameters.

@code {
    public string FirstData { get; set; } = "First data";
    public string SecondData { get; set; } = "Second data";
}

3. Pass the parameters to the child component by including them in the component's tag. If a parameter has been marked as required with the [EditorRequired] attribute, it must be passed, otherwise, you will receive a warning that there is a required parameter.

<Child InputParameter="FirstData" RequiredInputParameter="SecondData" />

Capture unmatched values

You have learned that in order to pass data from a parent component to a child component, the child component must first acknowledge the parameters that it expects to receive. However, in some cases, it may not be possible to predict which parameters will be passed to the component. A common scenario that demonstrates this situation is when working with HTML attributes (learn more at https://www.w3schools.com/html/html_attributes.asp). As you know, any HTML attribute can be defined and as a result, the child component will not know which or what attributes the parent component will pass. In such cases, Blazor's Parameter feature supports the child component by allowing it to catch all unmatched parameter values into a dictionary.

1. In your child component, declare a public property (just one) that will receive the unmatched parameters passed from the parent component.

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> AdditionalAttributes { get; set; } = new();
}

2. In your parent component, pass the parameters to the child component as usual.

<Child myCustomAttribute myCustomAttribute2="Blazor School"/>

Then your property AdditionalAttributes in the child component will have all the unmatched parameter values, where you can access them via dictionary keys:

Common mistake

When utilizing the parameter approach in Blazor, it is crucial to avoid altering the reference of a passed parameter within any child component. The following code sample illustrates this mistake:

@code {
    [Parameter]
    public ExampleClass ExampleInstance { get; set; } = new();

    public void Correct()
    {
        ExampleInstance.Data = "Value changed";
    }

    public void Mistake()
    {
        ExampleInstance = new()
        {
            Data = "Reference changed"
        };
    }
}

What will happen if you change the reference of a passed parameter?

Changing the reference of a passed parameter can result in unexpected behaviour, as the change will only be reflected within the child component and not the parent component. This can be demonstrated in the following video:

Detect changes

In Blazor, you can update the value of a parameter in both the parent component and its child components. In this section, you will learn how to:

• Detect changes made to a parameter in the parent component.
• Detect changes made to a parameter in a child component.

This allows you to create more dynamic and interactive user interfaces, by keeping the state of your components updated and synchronized.

Detect changes made to a parameter in the parent component

In Blazor, whenever the parent component updates the value of a passed parameter, the child components will automatically re-render with the new value. In most cases, there is no need to specifically detect these changes as the re-rendering will take care of it.

However, in certain scenarios, you may want to detect changes made to a parameter in the parent component and perform additional actions. In such cases, you can override the OnParametersSet() method in your child component. This method is called whenever the component receives new parameter values and it gives you the opportunity to perform custom logic. You can find more information about this method and other lifecycle events in the Blazor Component lifecycle tutorial.

Detect changes made to a parameter in a child component using EventCallBack

Unlike changes made in the parent component, updates to a passed parameter made by a child component will not automatically trigger a re-render of the parent component. To make the parent component react to these changes, you must pass a delegate to the child component. This delegate will be called by the child component whenever it updates the parameter value, notifying the parent component to update itself.

Here's how to implement this:

1. In your child component, declare the parameter and a delegate for that parameter.

@code {
    [Parameter]
    public ExampleClass ExampleInstance { get; set; } = new();

    [Parameter]
    public EventCallback ExampleInstanceChanged { get; set; }
}

2. Whenever you update the parameter, ensure to call the delegate of that parameter.

@code {
    ...
    public void UpdateValue()
    {
        ExampleInstance.Data = "Value changed at child";
        ExampleInstanceChanged.InvokeAsync();
    }
}

3. In your parent component, pass the method StateHasChanged() along with the parameter to the child component. This will tell the parent component to re-render itself, whenever the child component update the parameter value.

<Child ExampleInstance="ExampleInstance" ExampleInstanceChanged="StateHasChanged" />

Detect changes made to a parameter in a child component using @bind

You can achieve the same result as EventCallBack with @bind. This helps reduce the amount of code you need to write and makes your component easier to understand.

1. In your child component, declare the parameter and an EventCallback<{Type of parameter}> with the name {Parameter}Changed.

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

    [Parameter]
    public EventCallback<string> InputChanged { get; set; }
}

2. When updating the parameter in the child component, use the associated EventCallback to update it rather than updating the parameter directly. For example:

@code {
    ...
    public void UpdateInputFromChild()
    {
        InputChanged.InvokeAsync("Value changed at child");
    }
}

3. In your parent component, use @bind-{Parameter} to pass the parameter to the child component. For example:

<Child @bind-Input="PassingInput" />

@code {
    public string PassingInput { get; set; } = "Data from parent";
}