Getting Started With Ignite UI for Blazor

    The Ignite UI for Blazor is a complete set of Blazor components designed to enable developers to build the most modern, high-performance HTML5 & TypeScript apps for modern desktop browsers.

    The Ignite UI for Blazor is a complete set of Blazor components designed to enable developers to build the most modern, high-performance apps for modern desktop browsers.

    Step 1 - Create a New Blazor Project

    The steps below describe how to create a new Blazor project. If you want to add Ignite UI for Blazor components to an existing application, go to Step 2.

    1 - Start Visual Studio 2019 and click Create a new project on the start page, select the Blazor App template, and click Next.

    2 - Provide a project name and description, and click Create

    3 - Choose which Blazor template you'd like to use. Server or Web Assembly (WASM)

    Step 2 - Install the Ignite UI for Blazor NuGet package

    1 - Right click the Solution, or Project, and select Manage NuGet Packages for Solution.

    2 - In the package manager dialog, open the Browse tab, select the Infragistics package source, and install the IgniteUI.Blazor NuGet package into the project.

    Note

    If you are a trial user, you can install the IgniteUI.Blazor trial NuGet package found on NuGet.org.

    Note

    If you do not have an Infragistics package source available, learn how to add it by reading the Infragistics NuGet feed topic.

    Step 3 - Register Ignite UI for Blazor

    1 - Add the IgniteUI for Blazor script just above the default Blazor script.

    In Blazor Web Assembly - change wwwroot/index.html file:

    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    

    In Blazor Server - change Pages/_Host.cshtml file:

    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
    <script src="_framework/blazor.server.js"></script>
    

    2 - Register service modules for IgniteUI Blazor components using the AddIgniteUIBlazor method:

    In Blazor Web Assembly project - change the Program.cs file:

    using IgniteUI.Blazor.Controls;
    // ...
    
    public static async Task Main(string[] args)
    {
        // ...
        builder.Services.AddIgniteUIBlazor(typeof(GeographicMapModule));
    }
    

    In Blazor Server project - change the Startup.cs file:

    using IgniteUI.Blazor.Controls;
    // ...
    
    public void ConfigureServices(IServiceCollection services)
    {
        // ...
        services.AddIgniteUIBlazor(typeof(GeographicMapModule));
    }
    

    Optionally, modules can be registered within razor files at the time the page is initialized if registering modules at the application level is not feasible:

    @page ...
    
    @using IgniteUI.Blazor.Controls
    @inject IIgniteUIBlazor IgniteUIBlazor;
    
    @code
    {
    
       protected override void OnInitialized()
        {
            base.OnInitialized();
            GeographicMapModule.Register(IgniteUIBlazor);
    
            ...
        }
    }
    
    Note

    In this example, we registered the GeographicMapModule to use Blazor Radial Gauge component. However, you will need to register additional modules for other Blazor components and their features in order for them to work properly in your Blazor applications. Please see each component's documentation for more information on which modules they require.

    3 - Add the IgniteUI.Blazor.Controls namespace in _Imports.razor file:

    @using IgniteUI.Blazor.Controls;
    

    4 - Add Ignite UI for Blazor component in your razor page:

    <GeographicMap Height="100%" Width="100%" />
    </GeographicMap>