On Azure exists a service to provide a central manage application settings and features, called Azure App Configuration.

It's a really useful service especially for applications running in the cloud because they are distributed by nature.
With Azure App Configuration you can spread all the configuration trough all the components and services of your application.

In this article I will show you how to use the feature management to enable or disable functionalities in your application without a new deploy or restart the application.

Create an App Configuration Store on Azure

To create a new App Configuration, from the Azure Portal, click on the search bar on the top and start typing "app configuration"

Click on create and fill the form with your information.

After the deployment, select the new App Configuration from your resource group.

From the left navigation pane, click on "Features Manager" under the section "Operations".

Click on "Add" to create a new Feature.

Enter the Feature flag name "counter" and enable the feature flag.

Repeat the operation and call the new feature "weather".

Configure the Blazor Application

For this post, I use a Blazor Server App because, at the moment, the WASM project is not supported.

Add the NuGet packages called "Microsoft.FeatureManagement.AspNetCore" and "Microsoft.Azure.AppConfiguration.AspNetCore".

In the file "Program.cs", replace the code at line number 7 with the snippet below.

var builder = WebApplication.CreateBuilder(new WebApplicationOptions
{
    WebRootPath = "wwwroot"
});

builder.WebHost.ConfigureAppConfiguration(config =>
            {
                config.AddAzureAppConfiguration(options =>
                    options.Connect("CONNECTIONSTRING").UseFeatureFlags());
            });

Replace the CONNECTIONSTRING with the Azure App Configuration connection string from Azure Portal.

Create a new razor component on the project root called "FeatureFlagComponent.razor".

Replate the existing code in the file with the code below:

@using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager

@if (featureIsEnabled)
{
    @ChildContent
}

@code {
    private bool featureIsEnabled = false;

    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public string FlagName { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (string.IsNullOrEmpty(FlagName)) return;
        featureIsEnabled = await FeatureManager.IsEnabledAsync(FlagName);
    }
}

Now you are ready to use this new component in your code.
For instance, we want to hide or show a menu entry on the navigation bar.
Open the file NavMenu.razor and replace the two menu entries with this piece of code:

        <FeatureFlagComponent FlagName="counter">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="counter">
                    <span class="oi oi-plus" aria-hidden="true"></span> Counter
                </NavLink>
            </div>
        </FeatureFlagComponent>

        <FeatureFlagComponent FlagName="weather">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="fetchdata">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                </NavLink>
            </div>
        </FeatureFlagComponent>

Now you can try to enable or disable the features from Azure and see the menu entries that appear or disappear on the navigation menu.