Pass properties to a Blazor Component

Question

When i learn about components in Reactjs, I can try something like this

<Component {...properties} /> Now, I learn Blazor. How can I pass properties to some component??

Answer 1

This is very possible and exactly how Blazor components have been designed. A quick search of the interwebs has found the following useful documentation and articles;

• https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#parameters
• https://blazor-tutorial.net/component-parameters
• https://www.pragimtech.com/blog/blazor/blazor-component-parameters/
• https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/

Answer 2

You use [Parameter] within the component definition. For example, if you have a Blazor component like this

// BlazorComponent.razor
<div class="@Class">
  @ChildContent
</div>

@code {
  [Parameter] public string Class { get; set; }
  [Parameter] public RenderFragment ChildContent { get; set;}
}

You can consume that like this

<BlazorComponent Class="some-class">
  <p>Some Content</p>
</BlazorComponent>

Which will generate html like

<div class="some-class">
  <p>Some Content</p>
</div>