Easily Integrate Blazor Components into Any SPA Framework as Custom Elements
Tags: blazor, angular, webdev
Published: 2023-03-14 15:43:29

---
title: Easily Integrate Blazor Components into Any SPA Framework as Custom Elements
published: true
date: 2023-03-14 11:00:00 UTC
tags: blazor, angular, webdev
canonical_url: https://www.syncfusion.com/blogs/post/integrate-blazor-components-into-any-spa-framework.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yio4r0qrvwsk3mir7l9j.png
---
With the [release of .NET 7](https://dotnet.microsoft.com/en-us/download/dotnet/7.0 "Download .NET 7"), the [Blazor framework](https://www.syncfusion.com/blazor-components "Syncfusion Blazor Components") enables developers to integrate Razor components into popular JavaScript [SPA frameworks](https://single-spa.js.org/docs/getting-started-overview/ "Getting Started with single-spa") such as Angular and React. The key advantage of using Blazor custom elements is their ability to increase reusability while creating dynamic and engaging web applications.

In this blog, we will explore how to create custom elements from Blazor Razor components and learn how they can be integrated into an [Angular](https://www.syncfusion.com/Angular-components "Syncfusion Angular UI components") application.

## Creating a Blazor Server application

Let’s create a Blazor Server application with the **Blazor Server App Empty** template by following the guidelines to [build your first Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create "Blazor Tutorial - Build your first Blazor app").

The Blazor Server application will be created, as shown in the following screenshot.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Blazor-Server-Application.png" alt="Blazor Server Application" style="width:100%">

  <figcaption>Blazor Server Application</figcaption>

</figure>

### Creating a Razor Component

1.We have created the Blazor Server application. Now, let’s create a new Razor component called **CustomElements** by right-clicking the **Pages** folder, clicking **Add** , and then selecting **Razor Component**.  
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Add-Razor-Component.png" alt="Add Razor Component" style="width:100%">

  <figcaption>Add Razor Component</figcaption>

</figure>

2.Then, add the required HTML markup and C# code in the Razor component. I add the Blazor built-in component [InputSelect](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.inputselect-1?view=aspnetcore-7.0 "ASP.NET Core built-in InputSelect Razor component") and the [Syncfusion Blazor Dropdown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list "Syncfusion Blazor Dropdown List") component with **SelectedGame** defined as the parameter.  
For more information on the Syncfusion Blazor Dropdown List, refer to this [getting started documentation](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started "Getting Started with Syncfusion's Blazor Dropdown List").  
  
**CustomElements.razor**
```xml
@using Microsoft.AspNetCore.Components.Forms
@using Syncfusion.Blazor.DropDowns

<h2>Blazor component</h2>

<div class="custom-elements">
    Selected Game: <b>@SelectedGame</b>
       
    <label>Blazor built-in component</label>
      
    <InputSelect @bind-Value="SelectedGame" style="width: 50%;">
        @foreach (var game in Games)
        {
            <option value="@game">@game</option>
        }
    </InputSelect>
    
    <label>Syncfusion Blazor component</label>
     
    <SfDropDownList TItem="string" TValue="string" @bind-Value="@SelectedGame" DataSource="@Games">
    </SfDropDownList>

</div>

@code {
    [Parameter]
    public string SelectedGame { get; set; } = "Badminton";
    
    public List<string> Games = new List<string>() { "Badminton", "Basketball", "Cricket", "Football", "Hockey" };
}

<style>
    label {
        display: block;
        font-weight: bold;
        padding: 15px 0px;
    }
    .custom-elements {
        width: 500px;
    }
</style>
```
### Registering the Razor Component as a custom element

1.First, install the NuGet package [Microsoft.AspNetCore.Components.CustomElements](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.CustomElements "Microsoft.AspNetCore.Components.CustomElements NuGet Package"), which is used for Blazor custom element configuration.  
 ![Install Microsoft.AspNetCore.Components.CustomElements NuGet package](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Install-Microsoft.AspNetCore.Components.CustomElements-NuGet-package.png)

2.Register the **CustomElements** Razor component as a custom element with the tag name **my-blazor-component** in the **Program.cs** file. Refer to the following code.
```csharp
using BlazorServerApp.Pages;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;

//...

builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterCustomElement<CustomElements>("my-blazor-component");
});
builder.Services.AddSyncfusionBlazor();

//...
```

3.Now, we are ready with that part of the Blazor Server application. Run the application and note down the hosted URL link for the Angular application proxy configuration. The Blazor application will be launched in the URL [https://localhost:7039](https://localhost:7039/ "Localhost link"). ![Created Blazor application](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Created-Blazor-application.png)

## Creating an Angular application

Follow these steps to create an Angular application with the required configuration setup.

First, create a simple Angular application with the Angular CLI by following the steps described [in this link](https://github.com/angular/angular-cli#setting-up-a-project "Setting up a project with Angular CLI demo on GitHub").

### Configuring the proxy to access the Blazor Server app

1.Create a file named **proxy.conf.js** in the Angular project’s **src/folder** and add the following configuration code.  
  
**proxy.conf.json**  
```js
const target = "https://localhost:7039/" // Blazor application hosted URL

const PROXY_CONFIG = [
  {
    context: [,
      "/_content",
      "/_framework",
      "/_blazor",
    ],
    proxyTimeout: 3000,
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  },
  {
    context: [
      "/_blazor"
    ],
    target: target,
    secure: false,
    ws: true,
    logLevel: "debug"
  }
];

module.exports = PROXY_CONFIG;
```

2.Add the **proxyConfig** option to the **serve** target in the Angular CLI configuration. Refer to the following code.  
  
**angular.json**  
```js
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "src/proxy.conf.js"
  },
  //...
},
```

### Configuring the Angular app to use custom elements

Add the **CUSTOM\_ELEMENTS\_SCHEMA** to allow the Angular application to use our Blazor custom elements.

**app.module.ts**

```js
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule { }
```

### Adding Blazor custom element

1.Add the following scripts and style dependencies for our Blazor custom element in the **index.html** file.  
  
**index.html**  
```xml
<!doctype html>
<html lang="en">
<head>
    //...
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
    <app-root></app-root>
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/Microsoft.AspNetCore.Components.CustomElements/Microsoft.AspNetCore.Components.CustomElements.lib.module.js"></script>
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>
</html>
```
2.Add the Blazor custom element in the Angular application using the tag with which we registered the custom element in the Blazor Server application. Here, we replace all the content with the following code in the **app.component.html** file.  
  
**app.component.html**  
```xml
//...
<my-blazor-component selected-game="Football"></my-blazor-component>
```

### Run the application

Let’s run the Angular project using the following command. Also, ensure the Blazor Server application is hosted in that runnable URL.

```
npm start
```

You can see the demo of the runnable application in the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Blazor-Custom-Element-Used-in-Angular-App.gif" alt="Blazor Custom Element Used in Angular App" style="width:100%">

  <figcaption>Blazor Custom Element Used in Angular App</figcaption>

</figure>

The Angular application used the Blazor custom element example.

## GitHub reference

You can download the complete source code for [integrating Syncfusion’s Blazor components into any SPA framework as custom elements on GitHub](https://github.com/SyncfusionExamples/Integrate-Blazor-component-as-Custom-elements-in-JavaScript-SPA "Integrating Syncfusion's Blazor components into any SPA framework as custom elements demo on GitHub"). 

## Conclusion

Thank you for your time. This blog post covered how to utilize [Blazor](https://www.syncfusion.com/blazor-components "Syncfusion Blazor UI components")’s custom elements within the SPA framework Angular.

You can render Blazor custom elements within any SPA framework for reusability as a custom element. Please refer to [this documentation link](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-7.0#blazor-custom-elements "Getting started with Blazor custom clements") for more information on Blazor’s custom elements. If you have any questions or feedback, feel free to let us know in the comments section below.

You can try out our [Blazor components](https://www.syncfusion.com/blazor-components "Syncfusion Blazor UI components") by downloading a [free 30-day trial](https://www.syncfusion.com/account/manage-trials/downloads "Free evaluation of the Essenstial Studio"). If you have any questions, you can reach us through our [support forum](https://www.syncfusion.com/forums/blazor-components "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Building an Application for Microsoft Teams with Blazor](https://www.syncfusion.com/blogs/post/building-an-application-for-microsoft-teams-with-blazor.aspx "Blog: Building an Application for Microsoft Teams with Blazor")
- [Task Scheduling and Markers in Blazor Gantt Chart](https://www.syncfusion.com/blogs/post/task-scheduling-and-markers-in-blazor-gantt-chart.aspx "Blog: Task Scheduling and Markers in Blazor Gantt Chart")
- [Implement User Tagging in Blazor Rich Text Editor with Mention Component](https://www.syncfusion.com/blogs/post/user-tagging-in-blazor-rich-text-editor.aspx "Blog: Implement User Tagging in Blazor Rich Text Editor with Mention Component")
- [Seamlessly Create a Mind Map Using the Blazor Diagram Component](https://www.syncfusion.com/blogs/post/mind-map-using-blazor-diagram.aspx "Blog: Seamlessly Create a Mind Map Using the Blazor Diagram Component")