SyncfusionBuild · Sep 28, 2026 · Mar 30, 2026 · Mar 30, 2026 · Apr 1, 2026 · Apr 2, 2026
diff --git a/ej2-angular/badge/how-to/dynamic-badge-content.md b/ej2-angular/badge/how-to/dynamic-badge-content.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # How to set dynamic badge content in Angular Badge
 
-Badges in real-time needs to be updated dynamically based on the requirements. In this sample, using Angular data binding the badges content will be updated dynamically. Click the increment button to change the badge value.
+Badges in real-time need to be updated dynamically based on the requirements. In this sample, badges are rendered within a ListView template using Angular data binding, where the badge content is bound to a lookup object keyed by each list item's `text` field. Using Angular data binding, the badge content is updated dynamically. Click the increment button to increment all badge counts at once.
 
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}

diff --git a/ej2-angular/badge/how-to/integrate-badge-into-listview.md b/ej2-angular/badge/how-to/integrate-badge-into-listview.md
@@ -10,9 +10,9 @@ domainurl: ##DomainURL##
 
 # How to integrate badge into listview in Angular Badge
 
-The badges can be integrated with the `listview` component to indicate new notification with color based on priority.
+The badges can be integrated with the `listview` component to indicate new notifications with color-based priority.
 
-In the following sample, `default` badges are used and there is no need to customize the badge size. The component will automatically adjust the size based on the container element.
+In the following sample, badges are rendered inside the ListView item template, where the badge class is bound from the data-source's `badge` field and the badge content from the `messages` field. Predefined badge color classes such as `e-badge-primary`, `e-badge-secondary`, `e-badge-success`, `e-badge-info`, `e-badge-danger`, and `e-badge-warning` are applied per item to indicate priority. `default` badges are used, so there is no need to customize the badge size — the badge component automatically adjusts its size based on its content.
 
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}

diff --git a/ej2-angular/badge/types.md b/ej2-angular/badge/types.md
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
 
 # Types in Angular Badge
 
-This section explains different styles and types of the badges.
+This section explains different styles and types of badges.
 
 ## Badge styles
 
-The Essential<sup style="font-size:70%">&reg;</sup> JS 2 Badge has the following predefined styles that can be used with `.e-badge` class to change the appearance of a badge.
+The Essential<sup style="font-size:70%">&reg;</sup> JS 2 Badge has the following predefined styles that can be used with the `.e-badge` class to change the appearance of a badge.
 
 | Class Name        | Description
 | :-------------    |:-------------
@@ -91,7 +91,7 @@ The pill badge style can be applied by adding the modifier class `.e-badge-pill`
 
 ### Link
 
-When badge modifier classes are applied to the anchor tag, the badge’s appearance will change from normal state to hover state on mouseover.
+When badge modifier classes such as `.e-badge-primary` are applied to an anchor (`<a>`) tag, the badge's appearance changes from the normal state to the hover state on mouseover.
 
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
@@ -110,7 +110,7 @@ When badge modifier classes are applied to the anchor tag, the badge’s appeara
 ### Notification
 
 The notification badge style can be applied by adding the modifier class `.e-badge-notification` to the
-target element. Notification badges are used when a content or a context needs special attention.
+target element. Notification badges are used when content or a context needs special attention.
 While using the notification badge, set the parent element to `position: relative`.
 
 {% tabs %}
@@ -130,8 +130,8 @@ While using the notification badge, set the parent element to `position: relativ
 ### Dot
 
 Dot can be applied by adding the modifier class `.e-badge-dot` to the target element. Dot badges are
-similar to notification badges, but in a minimalistic way. While using the dot badge, set the parent
-element to `position: relative` .
+similar to notification badges, but in a more minimalistic style. While using the dot badge, set the parent
+element to `position: relative`.
 
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
@@ -149,8 +149,8 @@ element to `position: relative` .
 
 ### Overlap
 
-The overlap badge can be used with `notification` or `dot` badge, which overlaps with the target
--element by adding the modifier class `.e-badge-overlap`. While using the overlap badge, set the
+The overlap badge can be used with the `notification` or `dot` badge, which overlaps the target
+element's edge by adding the modifier class `.e-badge-overlap`. While using the overlap badge, set the
 parent element to `position: relative`.
 
 {% tabs %}
@@ -169,9 +169,9 @@ parent element to `position: relative`.
 
 ### Position
 
-The default position of the `notification` or `dot` badge is top. But, the position can be changed
+The default position of the `notification` or `dot` badge is `top`. However, the position can be changed
 to `bottom` using the modifier class `.e-badge-bottom`. For example, the bottom class modifier is used
-with dot badge to display the status in the avatar as shown in the following sample.
+with the dot badge to display the status in the avatar as shown in the following sample.
 
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}

diff --git a/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/index.html b/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/index.html
@@ -6,9 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Syncfusion EJ2 Grid with DOM Virtualization" />
     <meta name="author" content="Syncfusion" />
+     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
     <title>Angular Grid Sample</title>
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material3.css" rel="stylesheet" />
-    <style>
+   <style>
         body {
             margin: 0;
             padding: 0;
@@ -24,7 +24,6 @@
 
 <body>
     <app-root>Loading...</app-root>
-    <script src="dist/main.bundle.js"></script>
 </body>
 
 </html>
diff --git a/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/src/app.component.html b/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/src/app.component.html
@@ -9,7 +9,7 @@
   [pageSettings]="{ pageSize: 50 }"
   [filterSettings]="{ type: 'CheckBox' }"
   [toolbar]="['Search']"
-  height="400px"
+  height="300px"
   [rowHeight]="50"
   clipMode="EllipsisWithTooltip"
 >
@@ -19,6 +19,6 @@
     <e-column field="Designation" headerText="Designation" width="180"></e-column>
     <e-column field="Mail" headerText="Email" width="230"></e-column>
     <e-column field="Location" headerText="Location" width="150"></e-column>
-    <e-column field="ReportingPerson" headerText="Reporting Person" width="150"></e-column>
+    <e-column field="Status" headerText="Status" width="150"></e-column>
   </e-columns>
 </ejs-grid>
diff --git a/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/src/app.component.ts b/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/src/app.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { GridModule, GridComponent, Inject } from '@syncfusion/ej2-angular-grids';
-import { DomVirtualization, Sort, Filter, Toolbar } from '@syncfusion/ej2-angular-grids';
+import { GridModule, ToolbarService, DomVirtualizationService, FilterService, SortService } from '@syncfusion/ej2-angular-grids';
 import { DataManager, UrlAdaptor, Query } from '@syncfusion/ej2-data';
 
 @Component({
@@ -10,11 +9,11 @@ import { DataManager, UrlAdaptor, Query } from '@syncfusion/ej2-data';
   imports: [CommonModule, GridModule],
   templateUrl: './app.component.html',
   styleUrls: ['./styles.css'],
-  providers: [DomVirtualization, Sort, Filter, Toolbar]
+  providers: [DomVirtualizationService, ToolbarService, FilterService, SortService]
 })
 export class AppComponent implements OnInit {
-  public dataManager: DataManager;
-  public query: Query;
+  public dataManager!: DataManager;
+  public query!: Query;
 
   ngOnInit(): void {
     this.dataManager = new DataManager({

diff --git a/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/src/main.ts b/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/src/main.ts
@@ -1,4 +1,4 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
-
+import 'zone.js';
 bootstrapApplication(AppComponent).catch((err) => console.error(err));
diff --git a/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/src/styles.css b/ej2-angular/code-snippet/grid/dom-virtual-scroll-cs1/src/styles.css
@@ -1,3 +1,16 @@
+@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-calendars/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-navigations/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-notifications/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-angular-grids/styles/material3.css';
+
+
 :host {
   display: block;
   padding: 20px;

diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/angular.json b/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/angular.json
@@ -22,10 +22,13 @@
             "polyfills": [
               "zone.js"
             ],
-            "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "favicon.ico",
-              ".htaccess"
+            "tsConfig": "tsconfig.json",
+             "assets": [
+              {
+                "glob": "*.png",
+                "input": "",
+                "output": ""
+              }
             ],
             "styles": [
               "src/styles.css"
@@ -70,5 +73,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "75513252-6e3f-411d-9b90-be0aec39f531"
   }
 }
diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/package.json b/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/package.json
@@ -44,6 +44,7 @@
     "@angular/cli": "21.2.22",
     "@angular/compiler-cli": "21.2.22",
     "@types/jasmine": "4.3.0",
+    "@types/node": "18.19.76",
     "jasmine-core": "4.5.0",
     "karma": "6.4.0",
     "karma-chrome-launcher": "3.1.0",

diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/src/app.component.html b/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/src/app.component.html
@@ -14,19 +14,19 @@
               [allowSorting]='true'
               [allowFiltering]='true'
               [toolbar]='toolbar'
-              height="500px">
+              height="270px">
         <e-columns>
             <e-column field='SKUID' headerText='SKU ID' width='120' isPrimaryKey='true'></e-column>
             <e-column field='ProductName' headerText='Product Name' width='150'></e-column>
-            <e-column field='Category' headerText='Category' width='120' template='#categoryTemplate'></e-column>
+            <e-column field='Category' headerText='Category' width='120' template='#categoryTemplate'>
+              <ng-template #template let-data>
+                <span class="category-badge" [ngClass]="'category-' + data.Category?.toLowerCase()">
+                    {{ data.Category }}
+                </span>
+                </ng-template>
+            </e-column>
             <e-column field='AvailableStock' headerText='Available Stock' width='120' textAlign='Right'></e-column>
             <e-column field='UnitPrice' headerText='Unit Price' width='120' format='C2' textAlign='Right'></e-column>
         </e-columns>
     </ejs-grid>
 </div>
-
-<ng-template #categoryTemplate let-data>
-    <span [ngClass]="'category-badge category-' + data.Category?.toLowerCase()">
-        {{ data.Category }}
-    </span>
-</ng-template>
diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/src/app.component.ts b/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/src/app.component.ts
@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { GridModule, SortService, FilterService, ToolbarService } from '@syncfusion/ej2-angular-grids';
+import { GridModule, SortService, FilterService, ToolbarService, DomVirtualizationService } from '@syncfusion/ej2-angular-grids';
 import { SliderModule } from '@syncfusion/ej2-angular-inputs';
 import { data } from './datasource';
 
 @Component({
     imports: [GridModule, CommonModule, SliderModule],
-    providers: [SortService, FilterService, ToolbarService],
+    providers: [SortService, FilterService, ToolbarService, DomVirtualizationService],
     standalone: true,
     selector: 'app-root',
     templateUrl: 'app.component.html',

diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/src/main.ts b/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/src/main.ts
@@ -1,4 +1,4 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
-
+import 'zone.js';
 bootstrapApplication(AppComponent).catch(err => console.error(err));
diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/src/styles.css b/ej2-angular/code-snippet/grid/dom-virtualization-buffer-cs1/src/styles.css
@@ -1,3 +1,16 @@
+@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-calendars/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-navigations/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-notifications/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-angular-grids/styles/material3.css';
+
+
 .e-grid .e-row {
     line-height: 40px;
 }

diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/angular.json b/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/angular.json
@@ -22,10 +22,13 @@
             "polyfills": [
               "zone.js"
             ],
-            "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "favicon.ico",
-              ".htaccess"
+            "tsConfig": "tsconfig.json",
+             "assets": [
+              {
+                "glob": "*.png",
+                "input": "",
+                "output": ""
+              }
             ],
             "styles": [
               "src/styles.css"
@@ -60,15 +63,18 @@
           "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "syncfusion-component:build:production"
+              "buildTarget": "syncfusion-component:build:production"
             },
             "development": {
-              "browserTarget": "syncfusion-component:build:development"
+              "buildTarget": "syncfusion-component:build:development"
             }
           },
           "defaultConfiguration": "development"
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "600f791f-ce85-489e-9456-1a200454844f"
   }
 }
diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/src/app.component.html b/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/src/app.component.html
@@ -5,7 +5,7 @@
               [allowSorting]='true'
               [allowFiltering]='true'
               [toolbar]='toolbar'
-              height="500px">
+              height="300px">
         <e-columns>
             <e-column field='OrderID' headerText='Order ID' width='120' isPrimaryKey='true'></e-column>
             <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>

diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/src/app.component.ts b/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/src/app.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { GridModule, SortService, FilterService, ToolbarService } from '@syncfusion/ej2-angular-grids';
+import { GridModule, SortService, FilterService, ToolbarService,DomVirtualizationService } from '@syncfusion/ej2-angular-grids';
 import { data } from './datasource';
 
 @Component({
     imports: [GridModule, CommonModule],
-    providers: [SortService, FilterService, ToolbarService],
+    providers: [SortService, FilterService, ToolbarService, DomVirtualizationService],
     standalone: true,
     selector: 'app-root',
     templateUrl: 'app.component.html',

diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/src/main.ts b/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/src/main.ts
@@ -1,4 +1,4 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
-
+import 'zone.js';
 bootstrapApplication(AppComponent).catch(err => console.error(err));
diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/src/styles.css b/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/src/styles.css
@@ -1,3 +1,15 @@
+@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-calendars/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-navigations/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-notifications/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
+@import 'node_modules/@syncfusion/ej2-angular-grids/styles/material3.css';
+
 .e-grid .e-row {
     line-height: 40px;
 }

diff --git a/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/tsconfig.json b/ej2-angular/code-snippet/grid/dom-virtualization-massive-cs1/tsconfig.json
@@ -18,15 +18,18 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
+    "skipLibCheck": true,
     "lib": [
       "ES2022",
       "dom"
-    ]
+    ],
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   }
-}
+}
diff --git a/ej2-angular/code-snippet/grid/filter-menu-cs1/src/main.ts b/ej2-angular/code-snippet/grid/filter-menu-cs1/src/main.ts
@@ -1,4 +1,5 @@
 import { AppComponent } from './app.component';
 import { bootstrapApplication } from '@angular/platform-browser';
+import 'zone.js';
 
 bootstrapApplication(AppComponent).catch((err) => console.error(err));
diff --git a/ej2-angular/code-snippet/inline-ai-assist/speech/speech-events/angular.json b/ej2-angular/code-snippet/inline-ai-assist/speech/speech-events/angular.json
@@ -25,6 +25,11 @@
                 "glob": "*.css",
                 "input": "",
                 "output": ""
+              },
+              {
+                "glob": "*.png",
+                "input": "",
+                "output": ""
               }
             ]
           },