Component lifecycle in Blazor

In this article, we will explore the component lifecycle of Blazor,

There are different phases in the lifecycle of a component,

OnInitialized and OnInitializedAsync: This method used to initialize the component and here you can make an HTTP request to fetch data that is required to show after component initialization difference between both is OnIntialized method is synchronous and OnInitializedAsync is asynchronous.

OnParameterSet and OnParameterSetAsync: This method executes when the component receives all parameters and their values been assigned to their respective properties. And these methods are called every time when the values of parameters are updated.

OnAfterRender and OnAfterRenderAsync: These methods are executed when the component finishes rendering that is HTML is already displayed on-page. This is the ideal stage to perform operations on the HTML elements.

Productlist.razor

@page “/”
@inherits ProductlistBase
@if (Products == null)
{
<div class=”spinner”></div>
}
else
{
<div>
<input type=”checkbox” value=”Select Option” @onchange=”@(()=>displayButton=!displayButton)”/>
<br/>
@foreach (var product in Products)
{
<span>Product Id: @product.productId</span>
<span>Product Name: @product.ProductName</span>
@if (displayButton)
{
<button type=”button” name=”Delete” @onclick=”DeleteProduct”>Delete</button>
}
<br/>
}
</div>
<div>
<span>ONINIT: @OnInitialVal</span>
<br />
<span>ONPARAMETR: @OnParameterSetVal</span>
<br />
<span>ONRENDER: @OnAfterrenderVal</span>
</div>
}

ProductlistBase.cs

using EmployeeManagement.Web.Services;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace EmployeeManagement.Web.Pages
{
public class ProductlistBase:ComponentBase
{
[Inject]
public IProductService productService { get; set; }
public IEnumerable<Product> Products { get; set; }
public bool displayButton { get; set; } = false;
public string OnInitialVal { get; set; }
public string OnParameterSetVal { get; set; }
public string OnAfterrenderVal { get; set; }
protected override async Task OnInitializedAsync()
{
Products = (await productService.GetProducts()).ToList();
OnInitialVal = “Initialized testing product count:” + Products.Count().ToString();
}
protected override void OnParametersSet()
{
OnParameterSetVal=”On Parameter testing product count:” + Products.Count().ToString();
}
protected override void OnAfterRender(bool firstRender)
{
OnAfterrenderVal=”On After rende testing first render:” + firstRender.ToString();
}
protected override bool ShouldRender()
{
return true;
}
public void DeleteProduct()
{
Console.WriteLine(“Testing”);
}
}
}

Thank You, See you in the next article !!

You can reach out to me here,

LinkedIn: https://www.linkedin.com/in/vaibhav-bhapkar

Email: vaibhavbhapkar.medium@gmail.com