Templated Razor Components
Learn how to use templated Razor components.
We'll cover the following...
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: