...

/

Templated Razor Components

Templated Razor Components

Learn how to use templated Razor components.

To make it easy to build reusable components, Blazor allows us to create component templates. This is what we will cover in this lesson. To demonstrate how the Razor component templates work, we have the following project setup:

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
Templated Razor component example

Defining Razor component templates

In the example above, we've created a template for a table. It is stored inside the TableTemplate.razor file. We placed this file in the Shared folder because templates are meant to be shared.

In this template, we have three properties:

    ...