Exploring the Blazor component

The first thing we need to try out is a Blazor component. I have created a counter component inside a Blazor WebAssembly project named BlazorCustomElements.

The default template comes with a lot of things, and the repo project is stripped to the bare minimum, so it is easy to understand.

The component is nothing different from what we have seen in the book previously; it’s a counter component with a parameter that sets how much the counter should count up. It looks like this:

<h1>Blazor counter</h1>
<p role="status">Current count: @currentCount</p>
<p>Increment amount: @IncrementAmount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    [Parameter] public int IncrementAmount { get; set; } = 1;
    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

...