ASP NET Core Blazor Component with parameter passing

Blazor Component with parameter passing

I strongly recommend you to watch the previous video/post before proceeding.
Blazor or Razor Component

We can also pass parameter to the components and those parameters will be the public properties in the component class decorated with [Parameter] attribute.

We will use the Counter.razor component for demonstration: To specify arguments for a component in markup.

1. Update the component's @code C# code as follows:
2. Add a public AddAmount property with the [Parameter] attribute.
3. Change the IncrementCount method to use the AddAmount property when increasing the value of currentCount in Pages/Counter.razor:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code 

{ 

private int currentCount = 0; 

[Parameter] 

public int AddAmount { get; set; } = 1;

private void IncrementCount() 

{

currentCount += AddAmount ; 

}

}

Specify an AddAmount parameter in the Index component's <Counter> element using an attribute.

Set the value to increment the counter by ten.

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter AddAmount="10" />

Click below to see the full video steps in Action.