How-To: Define Parameters on a Blazor Component

Components can be made more generic by passing in parameter data which the component then uses in its layout and rendering. Rather than hard-coding all of the content of a component, we can expose parameters that allow the component users some flexibility. Component parameters are defined using public simple or complex properties on the component class with the [Parameter] attribute, typically in the @code block of the razor page.

To investigate component parameters, we must have a new Blazor component. Either open an existing Blazor project, or please follow the steps in the How-To: Create New Blazor Component article to get setup. For this article, we called the project: Blazor.HowTo and the component: BannerAd.

Define Component with Parameters

We are going to extend the BannerAd component from the New Component article by adding some parameters to it. These parameters will make the component customizable by its consumer. Many components, like the BannerAd, have data that should be dynamic and configurable, so that it can be used in multiple contexts and pages. With component parameters, we can define well known extension points for our component.

Let’s start by updating the BannerAd component in the Blazor.HowTo project and Components folder.

<div class="col-12 pt-1 rounded border" style="background-color: lightgray">
    <a href="@AdLink">
        <img class="float-left mr-2 mt-2 align-items-center" src="@ImageLink" />
    </a>
    <h5><strong>@Title</strong></h5>
    <p style="font-size: small">
        @ChildContent
    </p>
</div>

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

    [Parameter]
    public string ImageLink { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string AdLink { get; set; }
}

First, let’s review the properties in the @code block. We defined 3 simple string parameters: Title, ImageLink, and AdLink. Each of those properties is adorned with the [Parameter] attribute. With that attribute, these properties are exposed outside of this component to parent components. These properties will also be used in our component markup.

Next, we define the ChildContent property which is a RenderFragment, and also has the [Parameter] attribute (lines #18-19). By convention, Blazor sets the ChildContent property to the content between the the component tags. And the RenderFragment represents a segment of UI to render, so it can also be any HTML block (not just plain text). Therefore, any content placed between our BannerAd component start and end tags will be set in this ChildContent property.

Finally, we use one-way binding to render the values of these properties in our component markup:

• First, we bind the AdLink property as the <a> tag’s href value to use it as the navigation link for our ad (line #2). This means we navigate to whatever link is provided in the AdLink property.
• Then, we bind the ImageLink property as the <img> tag’s src attribute value (line #3). This represents the URL to image we display for the ad.
• Next, we bind the Title property into a header tag content (line #5).
• Finally, we bind the ChildContent property into a paragraph’s content section (line #7).

With these changes, we’ve made our BannerAd component generic. It can show any ad information as long as it is provided to these four properties. The component is just responsible for managing the layout and rendering of the component; and not its data. For example, our app can call an exertnal Ads service, retrieve this data, and bind it to this component.

Note: for the purposes of simplicity, we did not place default values in these parameters, so all of the data must be provided by the parent component or the BannerAd may not render correctly. But it’s trivial to add sensible defaults to these properties.

Consume Component

With the parameters exposed for our component, now we need to consume the component and set those parameter values. Let’s make the following changes to the Index.razor page in the Blazor.HowTo project and Pages folder.

@page "/"

<h1>Welcome to Blazor How-To!</h1>

<p>Welcome to your new app.</p>

<div class="col-lg-8 offset-lg-2 col-12 mt-5">
    <BannerAd ImageLink="/images/blazor-ad-image.png"
              Title="My Blazor Ad!"
              AdLink="https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-5.0">
        Learn about the <strong>.NET 5</strong> technology for building single page applications <i>(SPAs)</i>.
        Transfer your knowledge of C# and .NET into the exciting realm of frontend development.
    </BannerAd>
</div>

First, we place the component on the page using the <BannerAd> tag. The Razor editor recognizes that this is a component in our project. (We added the Components folder to the _Imports.razor file so we don’t need an @using directive on this page.)

Then, the ImageLink attribute is set to our local ad image URL. Notice that the parameters in our component are available as attributes here (in the parent component/page).

Next, the Title attribute is set to a different ad title to show that these are different values from previous articles.

And. the AdLink attribute it set to the target URL.

Finally, the ad’s display text is placed as content between the <BannerAd> and </BannerAd>. Remember, this data gets set to the ChildContent property in the BannerAd component. And, we added some simple HTML formatting in this content to show that it can be more than plain text. And, we can place as complex an HTML segment as we would like here.

With all of the properties set, we have completely setup our BannerAd component. Let’s build and run (Ctrl + F5) the project again to see the results.

In conclusion, we created a generic BannerAd component with component parameters that represent the customizable data that parent components/pages can provide. This makes the component layout and rendering reusable, while changing the data that is shown within it. Components are the core composition unit in Blazor, and parameters make them even more powerful.