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 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.

  1. Provide a project name and description, and click Create

  1. 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.

  1. 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. Link the static files. Add the _content/IgniteUI.Blazor/app.bundle.js script to the project just above the default Blazor script.

Web Assembly - wwwroot/index.html

Server - Pages/_Host.cshtml

  1. Register services and components modules

Web Assembly - Call the AddIgniteUIBlazor method in the Program.cs file in the Main method

public static async Task Main(string[] args)
{
    // ...

    builder.Services.AddIgniteUIBlazor(
                typeof(DataGridModule)
    );
}

Server - Call the AddIgniteUIBlazor method in the Startup.cs file in the ConfigureServices method

public void ConfigureServices(IServiceCollection services)
{
    // ...

    services.AddIgniteUIBlazor([
        DataGridModule
    ]);
}
Note

In this example, we are registering the DataGridModule for use in our Blazor application. Ignite UI for Blazor components, and their features, must have their respective modules registered in order to work properly in your Blazor applications. Please see each component's documentation for more information.

  1. Add the IgniteUI.Blazor.Controls namespace in _Imports.razor
@using IgniteUI.Blazor.Controls;
  1. Add Ignite UI for Blazor Components
Note

Ignite UI for Blazor components, and their features, must have their respective modules registered in the AddIgniteUIBlazor method. Please see each component's documentation for more information.