Examples of Ignite UI for Blazor Components

This repository contains over 300 examples on how to use Ignite UI for Blazor components:

• Charts: Area, Bar, Column, Composite, Donut, Financial/Stock, Line, Pie, Polar, Radial, Scatter, Shape, Sparkline, Stacked, Step,
• Maps: Geographic Map, Treemap,
• Gauges: Bullet Graph, Linear Gauge, Radial Gauges
• Grids: Table / Grid, Excel Library
• Other: Dock Manager, Date Picker, Multi-Column Combobox

You can run each sample project individually from the ./samples folder or you can browse all samples in one website from the ./browser folder.

Preview

You can preview and browse all samples in this repository by opening our Blazor Samples Browser. Alternatively, you you can view these samples with detailed information in our Blazor Help Documentation.

In addition, you can run each sample project individually from the ./samples folder or you can run from the ./browser folder to browse all samples in one website (see instructions below).

Setup

To set up this project locally, clone this repository:

git clone https://github.com/IgniteUI/igniteui-blazor-examples.git

NOTE: You should use master branch of this repository if you want to run samples on your computer. Use the vnext branch only when you want to contribute new samples to this repository.

Running Individual Sample

Note, this repo is targeting .NET 8.0 and Visual Studio 2022. VS 2019 does not support .NET 8.0.

• check out the master branch

• in VS 2022, open a solution file from the ./samples folder, e.g.

./samples/charts/category-chart/overview/BlazorClientApp.csproj

• right click solution and select Restore NuGet Packages menu item

• click Debug menu and select Start Debugging or press F5 key

• Wait until the build is completed and then open http://localhost:4200 in your browser

At this point, you should see a website with a single example of Ignite UI for Blazor component.

Running All Samples

• check out the master branch

• open VS Code as Administrator

• open the ./browser/IgBlazorSamples.Gulp folder

• select View - Terminal menu item

• type npm install command

• type gulp copySamplesToClient command

• wait until all samples are copied to the browser client app

• in VS 2022, open ./browser/IgBlazorSamplesBrowser.sln

• right click solution and select Restore NuGet Packages menu item

• click Debug menu and select Start Debugging or press F5 key

• Wait until the build is completed and then open http://localhost:4200 in your browser

At this point, you should see a website hosted all examples of Ignite UI for Blazor components.

Updating Packages in Samples

NOTE Do NOT find replace version of packages in package.json files.

• open this repo in VS Code
• open ./browser/IgBlazorSamples.Gulp/tasks/gulp-samples.js file
• navigate to the updateIG function
• update version of packages in packageUpgrades array
• open terminal window
• run cd browser/IgBlazorSamples.Gulp command
• run npm install --legacy-peer-deps command
• run the gulp updateIG command
• create AND merge a pull request with changes in all *.csproj files in this repository
• create 2nd pull request with similar changes in /editor-templates/Blazor/main-template/BlazorClientApp.csproj of the igniteui-xplat-examples repository.

Resources

• Razor Component Models
• Razor Syntax
• Getting reference to components