Integrate Syncfusion's Blazor Components into Any SPA Framework as Custom Elements

This example demonstrates how to create custom elements from Blazor Razor components and integrate them into JavaScript SPA frameworks such as Angular.

Prerequisites

• .NET 7.0 or later
• Visual Studio tool with installed "ASP.NET and web development"
• Angular 15+

Run the Blazor Server application

Using Visual Studio

• Open the BlazorServerApp(.sln or .csproj) file from BlazorServerApp\ location.
• Run the application (or press ctrl+ F5).

Using command prompt

cd BlazorServerApp
dotnet run

Leave that Blazor Server app running.

Run the Angular application

cd angular-app
npm install
npm start

Now browse to http://localhost:4200/, the Angular application dynamically renders the Blazor Server components.

Reference

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-7.0#blazor-custom-elements