1010977: Updated existing blazor with angular section

blazor/common/integration/blazor-angular-integration.md

@@ -7,49 +7,45 @@ control: Common
 documentation: ug
 ---
 
-# Integrating Syncfusion Blazor Components in Angular
+# Integrating Syncfusion® Blazor Components in Angular
 
-This guide demonstrates how to use **Syncfusion Blazor components** inside an **Angular** application.
+This guide demonstrates how to use [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components/blazor-datagrid) inside an **Angular application**.
 
 Blazor and Angular are two different web technologies. Blazor uses .NET and Razor components, while Angular uses TypeScript and HTML. Normally, these frameworks cannot share UI components. However, **Blazor Custom Elements** make this possible. A Custom Element turns a Blazor component into a standard HTML tag that Angular can recognize and render.
 
-## Prerequisite
+## Prerequisites
 
-* .NET 10 SDK 
-* Node.js 18+ 
-* Angular CLI 18+ 
+* [.NET 10 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/10.0) 
+* [Node.js 18+](https://nodejs.org/en/download)
+* [Angular CLI 18+](https://www.npmjs.com/package/@angular/cli) 
 
-## Creating the Blazor Application 
+## Creating the Blazor application 
 
 ### Create the project
 
-If you already have a Blazor project, proceed to the package installation section. Otherwise, create one using Syncfusion’s Blazor getting‑started guides.
+If you already have a Blazor project, proceed to the package installation section. Otherwise, create one using Syncfusion Blazor getting‑started guides.
 
 * [WebAssembly](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-
 * [Server](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
 
-### Install Custom Elements packages
+### Install custom elements packages
+
+To enable custom elements, install the required Microsoft packages.
 
-To enable Custom Elements, install the required Microsoft packages.
+{% tabs %}
+{% highlight bash tabtitle=".NET CLI" %}
 
-```
 dotnet add package Microsoft.AspNetCore.Components.Web --version 10.0.3 
 dotnet add package Microsoft.AspNetCore.Components.CustomElements --version 10.0.3 
-```
 
-Alternatively, install them using the NuGet Package Manager.
-
-```
-Microsoft.AspNetCore.Components.Web 
-Microsoft.AspNetCore.Components.CustomElements 
-```
+{% endhighlight %}
+{% endtabs %}
 
 ### Add Syncfusion component
 
-Add **.razor** file to incorporate the Syncfusion® DataGrid component:
+Create a `.razor` file to incorporate the Syncfusion DataGrid component:
 
-In this example, the file name used is **OrdersGrid.razor**
+In this example, the file name used is `OrdersGrid.razor`
 
 {% tabs %}
 {% highlight razor tabtitle="OrdersGrid.razor" %}
@@ -91,11 +87,11 @@ In this example, the file name used is **OrdersGrid.razor**
 {% endhighlight %}
 {% endtabs %}
 
-### Register it as a Custom Elements 
+### Register the above Syncfusion DataGrid component as a custom element
 
-To use your Razor component inside an Angular application, you must register it as a **Blazor Custom Element**. This registration exposes your **.razor** file as a standard HTML tag.
+To use your Razor component inside an Angular application, you must register it as a **Blazor Custom Element**. This registration exposes your `.razor` file as a standard HTML tag.
 
-Any Razor component that you want to use in Angular must be registered inside the **Program.cs** file. Add the following line:
+Any Razor component that you want to use in Angular must be registered inside the `Program.cs` file. Add the following line:
 
 {% tabs %}
 {% highlight c# tabtitle="Program.cs" %}
@@ -107,21 +103,25 @@ builder.RootComponents.RegisterCustomElement<SfxGridWasm.Pages.OrdersGrid>("sf-o
 
 This line registers the **OrdersGrid** component as a custom element named `<sf-orders-grid>`, making it available for use within your Angular application.
 
-## Integrating the Custom Elements in Angular 
+## Integrating the custom elements in Angular 
 
 ### Create the Angular app 
 
 If you already have an Angular project, move to the next step. Otherwise, create one using the Angular CLI. 
 
-```
+{% tabs %}
+{% highlight bash tabtitle="Angular CLI" %}
+
 ng new AngularApp --standalone 
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ### Configure Angular proxy 
 
 Blazor and Angular run on different local servers. To allow Angular to load Blazor files, you must create a proxy file. 
 
-Create a new file named **proxy.conf.json** inside the Angular project’s **src/** folder and add the below content.
+Create a new file named `proxy.conf.json` inside the Angular project’s `src/` folder and add the below content.
 
 {% tabs %}
 {% highlight json tabtitle="proxy.conf.json" %}
@@ -152,7 +152,7 @@ Create a new file named **proxy.conf.json** inside the Angular project’s **src
 {% endhighlight %}
 {% endtabs %}
 
-Then update the start script in **package.json**.
+Then update the start script in `package.json`.
 
 {% tabs %}
 {% highlight json tabtitle="package.json" %}
@@ -164,33 +164,43 @@ Then update the start script in **package.json**.
 
 ### Load Blazor runtime and Syncfusion theme/scripts
 
-The Blazor runtime and Syncfusion scripts/themes are required to load Syncfusion Blazor components inside Angular. Add the following to your Angular project’s **index.html** file.
+The Blazor runtime and Syncfusion scripts/themes are required to load Syncfusion Blazor components inside Angular. Add the following to your Angular project’s `index.html` file.
 
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
 
-<link rel="stylesheet" href="/blazor/_content/Syncfusion.Blazor.Themes/bootstrap5.css" /> 
+<link rel="stylesheet" href="/blazor/_content/Syncfusion.Blazor.Themes/fluent2.css" /> 
 <script src="/blazor/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"></script> 
 
 {% endhighlight %}
 {% endtabs %}
 
+N> Syncfusion provides multiple theme variants, allowing selection of the theme that best aligns with the application's UI design. Additional theme options and customization details are available in the [theming documentation](https://blazor.syncfusion.com/documentation/appearance/themes).
+
 WebAssembly:
 
-```
+{% tabs %}
+{% highlight html tabtitle="index.html" %}
+
 <script src="/blazor/_framework/blazor.webassembly.js"></script> 
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 Server:
 
-```
+{% tabs %}
+{% highlight html tabtitle="index.html" %}
+
 <script src="/blazor/_framework/blazor.server.js"></script> 
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ### Use the custom element in Angular
 
-Define the schemas and the custom element tag in the **app.ts** file. 
+Define the schemas and the custom element tag in the `app.ts` file. 
 
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
@@ -211,36 +221,50 @@ export class AppComponent {}
 
 [CUSTOM_ELEMENTS_SCHEMA](https://angular.dev/api/core/CUSTOM_ELEMENTS_SCHEMA) allows Angular to accept unknown HTML tags such as `<sf-orders-grid>`. 
 
-## Running Both Applications 
+## Running both applications 
 
 You can run both apps separately or together. 
 
 ### Option 1: Run separately 
 
 Blazor host:
 
-```
+{% tabs %}
+{% highlight bash tabtitle="CLI" %}
+
 dotnet run
-```
+
+{% endhighlight %}
+{% endtabs %}
+
 
 Angular app:
 
-```
+{% tabs %}
+{% highlight bash tabtitle="CLI" %}
+
 npm start
-```
+
+{% endhighlight %}
+{% endtabs %}
+
 Open the Angular development URL to see the Blazor DataGrid component inside Angular. 
 
 N> Start the Blazor application first so that Angular can load its resources through the proxy.
 
 ### Option 2: Run both using the concurrently package 
 
-```
+{% tabs %}
+{% highlight bash tabtitle="CLI" %}
+
 npm install --save-dev concurrently 
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 N> Install this package only once.
 
-Add the following scripts to  **package.json**
+Add the following scripts to  `package.json`.
 
 {% tabs %}
 {% highlight json tabtitle="package.json" %}
@@ -256,10 +280,14 @@ Add the following scripts to  **package.json**
 
 Then, run both with one command:  
 
-```
+{% tabs %}
+{% highlight bash tabtitle="CLI" %}
+
  npm run start:all 
-```
 
-Once the compilation completes, open your browser and navigate to http://localhost:4200/ to see your application with the integrated Syncfusion® DataGrid component:
+{% endhighlight %}
+{% endtabs %}
+
+Once the compilation completes, open your browser and navigate to `http://localhost:4200/` to see your application with the integrated Syncfusion DataGrid component: 
 
-![Blazor DataGrid Component](../images/blazor-angular-integration.webp)
+![Blazor DataGrid Component](../images/blazor-angular-integration.webp)

blazor/common/integration/blazor-datagrid-boldreports.md

@@ -7,7 +7,7 @@ control: Common
 documentation: ug
 ---
 
-# Integrating Syncfusion® DataGrid with Bold Report Viewer
+# Integrating Syncfusion® Blazor DataGrid with Bold Report Viewer
 
 This guide explains how to integrate the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) with the [Bold Report Viewer](https://www.boldreports.com/) to display grid data inside RDLC/RDL reports. This enables scenarios such as exporting grid data, generating printable reports, and providing data‑driven visualizations directly from a Blazor application.
 
@@ -18,21 +18,21 @@ If you haven't created your Blazor app yet, follow the [Blazor getting started g
 ## Prerequisites
 Make sure your development environment meets the [system requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components.
 
-## Install required Syncfusion packages
+## Install required NuGet packages
 
-Use NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution) and install:
+Use NuGet Package Manager (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*) and install the following packages:
 
-**Syncfusion NuGet packages**
-
-* [DataGrid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)  
-* [Theme](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
-* [Button](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons)
-
-**Bold Reports NuGet packages**
+**Syncfusion packages:**
+* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
+* [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons)
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
 
+**Bold Reports package:**
 * [BoldReports.Net.Core](https://www.nuget.org/packages/BoldReports.Net.Core)
-* [Microsoft.AspNetCore.Mvc.NewtonsoftJson](https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson/) 
-* [Microsoft.Data.SqlClient](https://www.nuget.org/packages/Microsoft.Data.SqlClient) 
+
+**Microsoft packages:**
+* [Microsoft.AspNetCore.Mvc.NewtonsoftJson](https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson/)
+* [Microsoft.Data.SqlClient](https://www.nuget.org/packages/Microsoft.Data.SqlClient)
 
 ## Add required namespaces
 
@@ -109,6 +109,8 @@ Add the Syncfusion theme CSS and required scripts to the `~/Components/App.razor
 {% endhighlight %}
 {% endtabs %}
 
+N> Syncfusion provides multiple theme variants, allowing selection of the theme that best aligns with the application's UI design. Additional theme options and customization details are available in the [theming documentation](https://blazor.syncfusion.com/documentation/appearance/themes).
+
 ## Add a sample report
 
 ### Create interop file
@@ -568,7 +570,7 @@ Inject **IJSRuntime**, render the DataGrid and invoke the JavaScript interop wit
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. 
 
-**Expected Behavior**
+**Expected behavior**
 * DataGrid renders with sample records.
 * Clicking **Open RDLC Report** sends the grid data to the Web API.
 * The Bold Report Viewer loads and displays the report.