Dependency Injection in Blazor

Configuring Services

Blazor supports dependency injection through the service container in Program.cs. Services can be registered with different lifetimes.

// Program.cs
builder.Services.AddSingleton<TimeService>();
builder.Services.AddScoped<DataService>();
builder.Services.AddTransient<LoggerService>();

Service Lifetimes

Singleton

• Single instance for all users and components

builder.Services.AddSingleton<IMyService, MyService>();

Scoped

• New instance for each circuit/user session

builder.Services.AddScoped<IDataService, DataService>();

Transient

• New instance each time requested

builder.Services.AddTransient<ILoggerService, LoggerService>();

Injecting Services in Components

To use a service within a component, use the @inject directive:

@inject TimeService Time
@inject IDataService DataService

<p>The time is: @Time.GetCurrentTime()</p>
<button @onclick="LoadData">Load Data</button>

@code {
    private async Task LoadData()
    {
        await DataService.LoadDataAsync();
    }
}

Constructor Injection

You can also inject services using constructor injection in component classes:

public class MyComponent : ComponentBase
{
    private readonly IDataService _dataService;
    private readonly ILogger<MyComponent> _logger;

    public MyComponent(IDataService dataService, ILogger<MyComponent> logger)
    {
        _dataService = dataService;
        _logger = logger;
    }
}

Creating Services

Example of a service class:

public interface ITimeService
{
    string GetCurrentTime();
}

public class TimeService : ITimeService
{
    public string GetCurrentTime()
    {
        return DateTime.Now.ToShortTimeString();
    }
}

HTTP Client Factory

Register and use HTTP clients:

// Program.cs
builder.Services.AddHttpClient();
builder.Services.AddHttpClient("api", client => 
{
    client.BaseAddress = new Uri("https://api.example.com");
});

// Component
@inject IHttpClientFactory ClientFactory

@code {
    private async Task FetchData()
    {
        var client = ClientFactory.CreateClient("api");
        var response = await client.GetAsync("data");
    }
}