Download Sample Code
Component Directives
As you have learned that a component consists of 3 sections: directive, UI, and code section. This tutorial solely focusing on the first section - directive.
- What is a component directive?
- List of directives in Blazor.
What is a Component Directive?
Component directives in Blazor are special keywords that provide instructions to the compiler. They are used to control component behavior, manage dependencies, and enhance functionality. They are usually placed at the top of a component. Here is an example of a directive: @page "/home"
In this example, it means that the user can navigate to this page by typing http://localhost/home in the address bar.
List of Directives in Blazor
Blazor offers several directives to facilitate various tasks within components. Here is a list of directives:
| Directive identifier | Description |
|---|---|
@inherits |
Specifies the base class for a component. |
@namespace |
Specifies the namespace for a component. |
@implements |
Specifies the interface for a component. |
@preservewhitespace |
Removes all redundant whitespace from an element. |
@typeparam |
Declares a generic type parameter for the generated component class. |
@layout |
Specifies the layout for a component. |
@inject |
Injects an instance into a component. |
@page |
Specifies the route and parameter for a component. |
@section |
Defines a section. Not available for Razor Components and not used in Blazor. |
@functions |
Deprecated, use @code instead. |
@rendermode |
Specifies the render mode for this component. |
