CODEWITHSUNDEEP
cblazorblazor-server-side
PsyDuck
PsyDuck

Reputation: 99

Pass properties to a Blazor Component

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??

Upvotes: 2

Views: 1216

Answers (3)

Zach Ioannou
Zach Ioannou

Reputation: 766

If you already know what is the purpose of the parameter you are passing i.e a style specific parameter, then you can just use parameters i.e.

calling the component

<MyComponent Style="border:0;" />

component code:

<input type="submit" style="@Style" />

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

However if the number of atributes you are passing is unknown then you can use an Input Attributes Dictionary.

Upvotes: 0

Douglas Riddle
Douglas Riddle

Reputation: 873

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>

Upvotes: 2

Mark Cooper
Mark Cooper

Reputation: 6884

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;

Upvotes: 1

Related Questions