Integrated latest changes at 09-04-2025 1:30:10 AM

Author: SyncfusionBuild

ej2-angular/Release-notes/31.1.17.md

@@ -1,13 +1,13 @@
 ---
-title: Essential Studio for Angular Release Notes   - v31.1.17
-description: Essential Studio for Angular 2025 Volume 3 Main Release Release Notes   - v31.1.17
+title: Essential Studio® for Angular Release Notes - v31.1.17
+description: Essential Studio® for Angular 2025 Volume 3 Main Release - Release Notes - v31.1.17
 platform: ej2-angular
 documentation: ug
 ---
 
-# Essential Studio for Angular  Release Notes   - v31.1.17
+# Essential Studio® for Angular - v31.1.17 Release Notes 
 
-{% include release-info.html date="September 01, 2025"  version="v31.1.17" passed="99554" failed="0" %}
+{% include release-info.html date="September 04, 2025"  version="v31.1.17" passed="99554" failed="0" %}
 
 {% directory path: _includes/release-notes/v31.1.17 %}
 

ej2-angular/accumulation-chart/dynamic-data-update.md

@@ -65,4 +65,4 @@ To replace the existing data source in the accumulation chart with a new data so
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/samples/chart/series/addpoint-cs3" %}
+{% previewsample "page.domainurl/samples/chart/series/addpoint-cs3" %}

ej2-angular/accumulation-chart/empty-points.md

@@ -39,4 +39,20 @@ border for an empty point can be set by using the `border` property.
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/samples/chart/series/radius-cs8" %}
+{% previewsample "page.domainurl/samples/chart/series/radius-cs8" %}
+
+## Handling when no data is available
+
+When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart/series/pie-cs47/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart/series/pie-cs47/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+  
+{% previewsample "page.domainurl/samples/chart/series/pie-cs47" %}

ej2-angular/breadcrumb/accessibility.md

@@ -2,15 +2,15 @@
 layout: post
 title: Accessibility in Angular Breadcrumb component | Syncfusion
 description: Learn here all about Accessibility in Syncfusion Angular Breadcrumb component of Syncfusion Essential JS 2 and more.
-control: Accessibility 
+control: Breadcrumb 
 platform: ej2-angular
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
 # Accessibility in Angular Breadcrumb component
 
-The Breadcrumb component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Breadcrumb component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Breadcrumb component is outlined below.
 
@@ -40,7 +40,7 @@ The accessibility compliance for the Breadcrumb component is outlined below.
 
 ## WAI-ARIA attributes
 
-The Breadcrumb component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) patterns to meet the accessibility. The following ARIA attributes are used in the Breadcrumb component:
+The Breadcrumb component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) patterns to meet accessibility standards. The following ARIA attributes are used in the Breadcrumb component:
 
 | Attributes | Purpose |
 | --- | --- |
@@ -49,7 +49,7 @@ The Breadcrumb component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg
 
 ## Keyboard interaction
 
-The Breadcrumb component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Breadcrumb component.
+The Breadcrumb component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#keyboardinteraction) guidelines, making it accessible for users who rely on assistive technologies and keyboard navigation. The following keyboard shortcuts are supported by the Breadcrumb component:
 
 | **Press** | **To do this** |
 | --- | --- |
@@ -60,12 +60,12 @@ The Breadcrumb component followed the [keyboard interaction](https://www.w3.org/
 
 ## Ensuring accessibility
 
-The Breadcrumb component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
+The Breadcrumb component's accessibility compliance is verified through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
 
-The accessibility compliance of the Breadcrumb component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/breadcrumb.html) in a new window to evaluate the accessibility of the Breadcrumb component with accessibility tools.
+The accessibility compliance of the Breadcrumb component is demonstrated in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/breadcrumb.html) in a new window to evaluate the accessibility of the Breadcrumb component with accessibility tools.
 
 {% previewsample "page.domainurl/samples/breadcrumb/accessibility-cs1" %}
 
 ## See also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components](../common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components](../common/accessibility)

ej2-angular/breadcrumb/overflow.md

@@ -3,7 +3,7 @@ layout: post
 title: Overflow in Angular Breadcrumb component | Syncfusion
 description: Learn here all about Overflow in Syncfusion Angular Breadcrumb component of Syncfusion Essential JS 2 and more.
 platform: ej2-angular
-control: Overflow 
+control: Breadcrumb 
 documentation: ug
 domainurl: ##DomainURL##
 ---
@@ -12,9 +12,9 @@ domainurl: ##DomainURL##
 
 ## Overflow Mode
 
-In the Breadcrumb component, `maxItems` and `overflowMode` properties were used to limit the number of breadcrumb items to be displayed.
+The Breadcrumb component uses the [`maxItems`](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb/#maxitems) and [`overflowMode`](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb/#overflowmode) properties to control how breadcrumb items are displayed when they exceed the available container space. The `maxItems` property sets the maximum number of items to display, while  [`overflowMode`](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb/#overflowmode) determines the behavior for handling additional items.
 
-In the following example, the maxItems is set as 3 with overflowMode as Default. To prevent breadcrumb item navigation, the `enableNavigation` property has been set to false in the Breadcrumb component.
+In the following example, maxItems is set to 3 with overflowMode as Menu (default). To prevent breadcrumb item navigation, the [`enableNavigation`](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb/#enablenavigation) property has been set to false in the Breadcrumb component.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}
@@ -28,7 +28,7 @@ In the following example, the maxItems is set as 3 with overflowMode as Default.
 
 {% previewsample "page.domainurl/samples/breadcrumb/navigations-cs5" %}
 
-The following overflow modes are available in the Breadcrumb component.
+The following overflow modes are available in the Breadcrumb component to handle items that exceed the container space:
 
 * Collapsed
 * Menu
@@ -39,7 +39,7 @@ The following overflow modes are available in the Breadcrumb component.
 
 ## Collapsed
 
-Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon. When the collapsed icon is clicked, all items become visible and navigable.
+Collapsed mode displays the first and last breadcrumb items while hiding intermediate items behind a collapsed icon (ellipsis). When the collapsed icon is clicked, all hidden items become visible and navigable, providing a compact view that maintains access to all navigation levels.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}
@@ -55,7 +55,7 @@ Collapsed mode shows the first and last Breadcrumb items and hides the remaining
 
 ## Menu
 
-Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.
+Menu mode displays the maximum number of breadcrumb items that fit within the container space and organizes the remaining items into a dropdown submenu. This mode provides efficient space utilization while keeping all items accessible through the overflow menu.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}
@@ -71,7 +71,7 @@ Menu mode shows the number of Breadcrumb items that can be accommodated within t
 
 ## Wrap
 
-Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space.
+Wrap mode automatically wraps breadcrumb items to multiple lines when the total width exceeds the container space.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}
@@ -87,7 +87,7 @@ Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceed
 
 ## Scroll
 
-Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
+Scroll mode displays an HTML scroll bar when the breadcrumb width exceeds the container space, allowing users to horizontally scroll to view hidden items. This mode maintains the single-line layout while providing access to all items through scrolling.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}
@@ -103,7 +103,7 @@ Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the c
 
 ## Hidden
 
-Hidden mode shows the maximum number of items possible in the container space and hides the remaining items. Clicking on a previous item will make the hidden item visible.
+Hidden mode displays the maximum number of items that fit within the container space and completely hides the remaining items. Hidden items become visible when users navigate to previous levels by clicking on visible breadcrumb items, creating a dynamic navigation experience.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}

ej2-angular/breadcrumb/templates.md

@@ -3,18 +3,18 @@ layout: post
 title: Templates in Angular Breadcrumb component | Syncfusion
 description: Learn here all about Templates in Syncfusion Angular Breadcrumb component of Syncfusion Essential JS 2 and more.
 platform: ej2-angular
-control: Templates 
+control: Breadcrumb 
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
 # Templates in Angular Breadcrumb component
 
-The Breadcrumb component provides a way to customize the items using `itemTemplate` and the separators using `separatorTemplate` properties.
+The Breadcrumb component provides flexible template customization options to create rich, interactive navigation experiences. Use the [`itemTemplate`](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb/#itemtemplate) property to customize individual breadcrumb items and the [`separatorTemplate`](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb/#separatortemplate) property to customize the separators between items, enabling full control over the visual presentation and functionality.
 
 ## Item Template
 
-In the following example, Shopping Cart details are used as breadcrumb Items and the items are customized by the chips component using `itemTemplate`.
+The following example demonstrates customizing breadcrumb items using the [`itemTemplate`](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb/#itemtemplate) property. This shopping cart navigation scenario shows how breadcrumb items can be enhanced with chip components to create a more engaging user interface.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}
@@ -30,7 +30,7 @@ In the following example, Shopping Cart details are used as breadcrumb Items and
 
 ## Separator Template
 
-In the  following example, the separators are customized with icons using `separatorTemplate`.
+The following example shows how to customize separators between breadcrumb items using the [`separatorTemplate`](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb/#separatortemplate) property. Custom icons replace the default separator to create a more visually distinctive navigation path.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}
@@ -46,7 +46,7 @@ In the  following example, the separators are customized with icons using `separ
 
 ## Customize Specific Item Template
 
-The specific breadcrumb item can be customizable using itemTemplate with conditional rendering. In the following example, added the span element only for the breadcrumb text in `breadcrumb` item.
+Individual breadcrumb items can be customized selectively using [`itemTemplate`](https://ej2.syncfusion.com/angular/documentation/api/breadcrumb/#itemtemplate) with conditional rendering logic. The following example demonstrates how to apply custom styling with a span element specifically to items containing "Breadcrumb" in their text, while leaving other items with default styling.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}

ej2-angular/chart/working-with-data.md

@@ -201,3 +201,19 @@ Specific color for empty point can be set by `fill` property in `emptyPointSetti
 {% endtabs %}
 
 {% previewsample "page.domainurl/samples/chart/series/column-cs30" %}
+
+## Handling when no data is available
+
+When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart/series/column-cs54/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart/series/column-cs54/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+  
+{% previewsample "page.domainurl/samples/chart/series/column-cs54" %}

ej2-angular/code-snippet/chart/series/column-cs54/angular.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

ej2-angular/code-snippet/chart/series/column-cs54/index.css

@@ -0,0 +1,22 @@
+#loader {
+    color: #008cff;
+    font-family:  'Helvetica Neue','calibiri';
+    font-size:16px;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+}
+.animation {
+    background: #333333;
+    border: 1px solid #cecece;
+    box-sizing: border-box;
+    height: 100px;
+    width: 100px;
+}
+
+#chart-container {
+    display: block;
+    height: 350px;
+}

ej2-angular/code-snippet/chart/series/column-cs54/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Animation</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    
+<meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+
+    <style>
+    #noDataTemplateContainer {
+        height: inherit;
+        width: inherit;
+    }
+
+    .load-data-btn {
+        border-radius: 4px !important;
+        text-transform: none !important;
+    }
+    .light-bg {
+        background-color: #fafafa;
+        color: #000000;
+    }
+
+    .template-align img {
+        max-width: 150px;
+        /* Adjust size as needed */
+        max-height: 150px;
+        margin-top: 55px;
+    }
+
+    .template-align {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    </style>
+    
+</head>
+
+<body style="margin-top: 125px">
+    <app-container>
+        <div id='loader'>Loading....</div>
+    </app-container>
+</body>
+
+</html>