diff --git a/ej2-angular-toc.html b/ej2-angular-toc.html
index 591ac154db8..03c9ab182fc 100644
--- a/ej2-angular-toc.html
+++ b/ej2-angular-toc.html
@@ -1,6 +1,5 @@
Sample Applications
-
3D Chart
- Collaborative Editing
+ Real-time Collaboration
Editor Menus
Drag and drop
Paste Cleanup
@@ -1108,6 +1106,7 @@
Visio Integration
UML Sequence Diagram
+ Entity Relationship Diagram
Collaborative Editing
Release Notes
- - 2026 Volume 2 - 34.*
+ - 2026 Volume 2 - 34.*
- 2026 Volume 1 - 33.*
- Weekly Release
diff --git a/ej2-angular/3d-chart/getting-started.md b/ej2-angular/3d-chart/getting-started.md
index 762090ae95c..a21473f8df2 100644
--- a/ej2-angular/3d-chart/getting-started.md
+++ b/ej2-angular/3d-chart/getting-started.md
@@ -1,24 +1,24 @@
---
layout: post
-title: Getting started with Angular 3D Chart component | Syncfusion
-description: Checkout and learn about Getting started with Angular 3D Chart component of Syncfusion Essential JS 2 and more details.
+title: Getting Started with Angular 3D Chart component | Syncfusion
+description: Check out and learn about Getting Started with Angular 3D Chart component of Syncfusion Essential JS 2 and more details.
platform: ej2-angular
-control: Getting started
+control: Getting Started
documentation: ug
domainurl: ##DomainURL##
---
-# Getting started with Angular 3D Chart component
+# Getting Started with Angular 3D Chart Component
-This section explains the steps required to create a simple [Angular 3D Chart](https://www.syncfusion.com/angular-components/angular-3d-chart) and demonstrates the basic usage of the 3D Chart component in an Angular environment.
+This section explains the steps required to create a simple [Angular 3D Chart](https://www.syncfusion.com/angular-components/angular-3d-chart) and demonstrates the basic usage of the Angular 3D Chart component.
-> Note: This guide supports **Angular 21** and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility). Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.
+> **Note:** This guide supports **Angular 21** and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility). Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.
> **Ready to streamline your Syncfusion® Angular development?** Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/angular/documentation/ai-coding-assistant/overview)
## Prerequisites
-Ensure your development environment meets the [System Requirements for Syncfusion® Angular UI Components](https://ej2.syncfusion.com/angular/documentation/system-requirement).
+Before getting started, ensure that your environment meets the [system requirements for Syncfusion® Angular UI components](https://ej2.syncfusion.com/angular/documentation/system-requirement), which covers supported Node.js, Angular, and `@syncfusion/ej2-angular-charts` versions.
## Setup Angular environment
@@ -28,6 +28,12 @@ A straightforward approach to begin with Angular is to create a new application
npm install -g @angular/cli
```
+Verify the installation:
+
+```bash
+ng version
+```
+
> **Angular 21 Standalone Architecture:** Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the [Standalone Guide](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone).
### Installing a specific version
@@ -66,11 +72,11 @@ ng new syncfusion-angular-app --style=scss
* During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.
-
+
* Select the required AI tool or 'none' if you do not need any AI tool.
-
+
* Navigate to your newly created application directory:
@@ -78,13 +84,13 @@ ng new syncfusion-angular-app --style=scss
cd syncfusion-angular-app
```
-> Note: In Angular 19 and below, the CLI generates files like `app.component.ts`, `app.component.html`, `app.component.css`, etc. In Angular 20+, the CLI generates a simpler structure with `src/app/app.ts`, `app.html`, and `app.css` (no `.component.` suffixes).
+> **Note:** In Angular 19 and below, the CLI generates files like `app.component.ts`, `app.component.html`, `app.component.css`, etc. In Angular 20+, the CLI generates a simpler structure with `src/app/app.ts`, `app.html`, and `app.css` (no `.component.` suffixes).
## Installing Syncfusion® 3D Chart package
Syncfusion®'s Angular component packages are available on [npmjs.com](https://www.npmjs.com/search?q=ej2-angular). To use Syncfusion® Angular components, install the necessary package.
-This guide uses the [Angular 3D Chart component](https://www.syncfusion.com/angular-components/angular-3d-chart) for demonstration. Add the Angular 3D Chart component with:
+This guide uses the [Angular 3D Chart component](https://www.syncfusion.com/angular-components/angular-3d-chart) for demonstration. Add the [Angular Chart package](https://www.npmjs.com/package/@syncfusion/ej2-angular-charts) with:
```bash
ng add @syncfusion/ej2-angular-charts
@@ -121,36 +127,31 @@ npm add @syncfusion/ej2-angular-charts@32.1.19-ngcc
## Add 3D Chart component
-Modify the template in `app.component.ts` file to render the 3D Charts component `[src/app/app.component.ts]`.
+Modify the template in `src/app/app.component.ts` (or `src/app/app.ts` in Angular 20+) to render the 3D Chart component:
-```javascript
-import { Component, ViewEncapsulation } from '@angular/core';
-import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';
+```typescript
+import { Component } from '@angular/core';
+import { Chart3DModule } from '@syncfusion/ej2-angular-charts';
@Component({
- imports: [Chart3DAllModule],
+ imports: [Chart3DModule],
standalone: true,
- selector: 'app-container',
- // specifies the template string for the 3D Charts component
+ selector: 'app-root',
+ // specifies the template string for the 3D Chart component
template: ``,
- encapsulation: ViewEncapsulation.None
})
-export class AppComponent { }
-```
-
-Now use the `app-container` selector in the `index.html` file instead of the default one.
-
-```html
-
+export class AppComponent { }
```
-Use the `ng serve` command to run the application in the browser.
+Use the `ng serve` command to run the application in the browser:
```bash
ng serve
```
-The below example shows a basic 3D Chart.
+Verify that an empty 3D Chart renders before proceeding to the next step.
+
+The following example shows a basic 3D Chart.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -166,128 +167,73 @@ The below example shows a basic 3D Chart.
## Module injection
-3D Chart components are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the `app.component.ts`. In the current application, we are going to modify the above basic 3D Chart to visualize sales data for a particular year. For this application we are going to use column series, tooltip, data label, category axis and legend feature of the 3D Chart. Please find relevant feature service name and description as follows.
-
-* `ColumnSeries3DService` - Inject this provider to use column series.
-* `Legend3DService` - Inject this provider to use legend feature.
-* `Tooltip3DService` - Inject this provider to use tooltip feature.
-* `DataLabel3DService` - Inject this provider to use datalabel feature.
-* `Category3DService` - Inject this provider to use category feature.
-
-Now import the above-mentioned modules from the chart package and inject them into the Chart3D component through the `provider` section.
-
- ```javascript
- import { Chart3DModule, ColumnSeries3DService, Legend3DService, Tooltip3DService, DataLabel3DService, Category3DService } from '@syncfusion/ej2-angular-charts';
- import { Component } from '@angular/core';
-
- @Component({
- imports: [Chart3DModule],
- standalone: true,
- providers: [ ColumnSeries3DService, Legend3DService, Tooltip3DService, DataLabel3DService, Category3DService ]
- })
- ```
-
-## Populate chart with data
-
-This section explains how to plot the following JSON data to the 3D Chart.
-
-```javascript
- export class AppComponent implements OnInit {
- public chartData: Object[];
- ngOnInit(): void {
- // Data for chart series
- this.chartData = [
- { x: 'Tesla', y: 137429 },
- { x: 'Aion', y: 80308 },
- { x: 'Wuling', y: 76418 },
- { x: 'Changan', y: 52849 },
- { x: 'Geely', y: 47234 },
- { x: 'Nio', y: 31041 },
- { x: 'Neta', y: 22449 },
- { x: 'BMW', y: 18733 }
- ];
- }
-}
-```
-
-Add [`series`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesdirective) to the 3D Chart in the component template using the `` and `` child directives. Map the JSON fields `x` and `y` to the series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesdirective#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesdirective#yname) properties, and set the JSON array as the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesdirective#datasource) property.
+3D Chart components are segregated into individual feature-wise modules. To use a particular feature, you need to inject its corresponding feature service in `app.component.ts`.
-Since the JSON contains category data, set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3daxismodel#valuetype) for the horizontal axis (primaryXAxis) to `Category`. By default, the axis valueType is `Numeric`.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs2/src/app.component.ts %}
-{% endhighlight %}
+There are two ways to register 3D Chart services:
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/samples/3d-chart/getting-started/getting-started-cs2" %}
+- **`Chart3DAllModule`** — Registers every available feature service at once. Use this for quick setup or when you need most features.
+- **`Chart3DModule`** — Registers only the services you explicitly add to the `providers` array. This granular form is recommended for production applications to keep bundle size small.
-## Add 3D Chart title
+For this application, column series, tooltip, data label, category axis, and legend features of the 3D Chart are used. The relevant feature service names and descriptions are:
-You can add a title using the [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dmodel#title) property to the 3D Chart to provide quick information to the user about the data plotted in the 3D Chart.
+| Service | Description |
+| --- | --- |
+| `ColumnSeries3DService` | Required to render the column series. |
+| `Legend3DService` | Required to render the legend. |
+| `Tooltip3DService` | Required to render the tooltip. |
+| `DataLabel3DService` | Required to render data labels. |
+| `Category3DService` | Required to render the category axis. |
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs3/src/app.component.ts %}
-{% endhighlight %}
+Update `src/app/app.component.ts` to import the services and add them to the `providers` array of the component:
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs3/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/samples/3d-chart/getting-started/getting-started-cs3" %}
+```typescript
+import { Component } from '@angular/core';
+import { Chart3DModule, ColumnSeries3DService, Legend3DService, Tooltip3DService, DataLabel3DService, Category3DService } from '@syncfusion/ej2-angular-charts';
-## Enable legend
+@Component({
+ imports: [Chart3DModule],
+ standalone: true,
+ selector: 'app-root',
+ providers: [ColumnSeries3DService, Legend3DService, Tooltip3DService, DataLabel3DService, Category3DService],
+})
+export class AppComponent { }
+```
-You can use legend for the 3D Chart by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dlegendsettingsmodel#visible) property to `true` in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dmodel#legendsettings) object and by injecting the `Legend3DService` into the component's `providers` array.
+## Populate chart with data and add a series
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs4/src/app.component.ts %}
-{% endhighlight %}
+This section explains how to plot JSON data in the 3D Chart. The following example uses `Chart3DAllModule` to register every feature service, defines the sales data, configures the axes, and binds the series to the chart.
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs4/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/samples/3d-chart/getting-started/getting-started-cs4/" %}
+Add [`series`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesdirective) to the 3D Chart in the component template using the `` and `` child directives. Map the JSON fields `x` and `y` to the series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesdirective#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesdirective#yname) properties, and set the JSON array as the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesdirective#datasource) property.
-## Add data label
+Since the JSON contains category data, set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3daxismodel#valuetype) for the horizontal axis (`primaryXAxis`) to `Category`. By default, the axis `valueType` is `Numeric`.
-You can add data labels to improve the readability of the 3D Chart. This can be achieved by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3ddatalabelsettingsmodel#visible) property to `true` in the [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dseriesdirective#datalabel) object and by injecting `DataLabel3DService` into the component's `providers` array. Now, the data labels are arranged smartly based on series.
+The 3D Chart renders a 3D column series with the brand names (Tesla, Aion, Wuling, etc.) on the horizontal axis and the sales values on the vertical axis. The columns appear as 3D bars in the rendered scene.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs5/src/app.component.ts %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs2/src/app.component.ts %}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs5/src/main.ts %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs2/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/samples/3d-chart/getting-started/getting-started-cs5" %}
+{% previewsample "page.domainurl/samples/3d-chart/getting-started/getting-started-cs2" %}
-## Enable tooltip
+## Troubleshooting
-The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dtooltipsettingsmodel#enable) property as `true` in [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dmodel#tooltip) object and by injecting `Tooltip3DService` into the component's `providers` array.
+If the 3D Chart does not render as expected, check for these common issues:
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs6/src/app.component.ts %}
-{% endhighlight %}
+* **"No provider for ColumnSeries3DService" error**: Confirm that the relevant `*3DService` is added to the component's `providers` array. Each feature requires its corresponding service.
+* **Chart not visible**: Verify that the `` element has a unique `id` and that the component's `selector` matches the root element used in `src/index.html` (commonly ``).
+* **3D scene looks flat** (no depth or lighting): Check that `` is wrapped in `` and that `enableRotation` / `enablePerspective` are set on the chart if rotation is desired.
+* **Data not displayed**: Verify that the `xName` and `yName` values match the field names in the data source exactly, and that the `valueType` is set to `Category` for category data.
+* **Build errors**: Run `ng version` to confirm that Node.js, Angular CLI, and `@syncfusion/ej2-angular-charts` are on supported versions.
+* **Port already in use**: If `ng serve` fails because port `4200` is in use, run `ng serve --port 4201` (or another free port) instead.
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs6/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/samples/3d-chart/getting-started/getting-started-cs6" %}
+## See also
-> You can refer to our [Angular 3D Charts](https://www.syncfusion.com/angular-components/angular-3d-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Angular 3D Charts example](https://ej2.syncfusion.com/angular/demos/#/material3/three-dimension-chart/column) that shows various 3D Chart types and how to represent time-dependent data, showing trends in data at equal intervals.
\ No newline at end of file
+* [Customize the 3D chart axes](axis-customization)
+* [Configure the 3D chart legend](legend)
+* [Customize the 3D chart tooltip](tool-tip)
\ No newline at end of file
diff --git a/ej2-angular/3d-chart/legend.md b/ej2-angular/3d-chart/legend.md
index 94706e7f59b..4bc264e5d42 100644
--- a/ej2-angular/3d-chart/legend.md
+++ b/ej2-angular/3d-chart/legend.md
@@ -16,9 +16,25 @@ domainurl: ##DomainURL##
Legend provides information about the series rendered in the 3D chart.
+## Enable legend
+
+You can use legend for the 3D Chart by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dlegendsettingsmodel#visible) property to `true` in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3dmodel#legendsettings) object and by injecting the `Legend3DService` into the component's `providers` array.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs4/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs4/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/3d-chart/getting-started/getting-started-cs4/" %}
+
## Position and alignment
-By using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#position) property, the legend can be positioned at left, right, top or bottom of the 3D chart. The legend is positioned at the bottom of the 3D chart, by default.
+By using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#position) property, the legend can be positioned at left, right, top or bottom of the 3D chart. The legend is positioned at the bottom of the 3D chart, by default.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -48,7 +64,7 @@ The custom position helps you to position the legend anywhere in the 3D chart us
### Legend reverse
-The order of the legend items can be reversed by using the [`reverse`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#reverse) property. By default, legend for the first series in the collection will be placed first.
+The order of the legend items can be reversed by using the [`reverse`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#reverse) property. By default, legend for the first series in the collection will be placed first.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -64,7 +80,7 @@ The order of the legend items can be reversed by using the [`reverse`](https://e
### Legend alignment
-The legend can be aligned at near, far or center to the 3D chart using the [`alignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#alignment) property.
+The legend can be aligned at near, far or center to the 3D chart using the [`alignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#alignment) property.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -80,7 +96,7 @@ The legend can be aligned at near, far or center to the 3D chart using the [`ali
## Legend customization
-To change the legend icon shape, [`legendShape`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#legendshape) property in the [`series`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel) can be used. By default, the legend icon shape is `seriesType`.
+To change the legend icon shape, [`legendShape`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#legendshape) property in the [`series`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel) can be used. By default, the legend icon shape is `seriesType`.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -96,7 +112,7 @@ To change the legend icon shape, [`legendShape`](https://ej2.syncfusion.com/angu
### Legend size
-By default, legend takes 20% - 25% of the 3D chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the 3D chart's width vertically, when it is placed on left or right position. You can change this default legend size by using the [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#height) and [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#width) properties of the `legendSettings`.
+By default, legend takes 20% - 25% of the 3D chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the 3D chart's width vertically, when it is placed on left or right position. You can change this default legend size by using the [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#height) and [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#width) properties of the `legendSettings`.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -112,7 +128,7 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i
### Legend item size
-The size of the legend items can be customised by using the [`shapeHeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#shapeheight) and [`shapeWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#shapewidth) properties.\
+The size of the legend items can be customized by using the [`shapeHeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#shapeheight) and [`shapeWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#shapewidth) properties.\
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -144,7 +160,7 @@ Paging will be enabled by default, when the legend items exceeds the legend boun
### Legend text wrap
-When the legend text exceeds the container, the text can be wrapped by using the [`textWrap`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#textwrap) property. End user can also wrap the legend text based on the [`maximumLabelWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#maximumlabelwidth) property.
+When the legend text exceeds the container, the text can be wrapped by using the [`textWrap`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#textwrap) property. End user can also wrap the legend text based on the [`maximumLabelWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#maximumlabelwidth) property.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -160,7 +176,7 @@ When the legend text exceeds the container, the text can be wrapped by using the
## Series selection through legend
-By default, you can collapse the series visibility by clicking the legend. On the other hand, turn off the [`toggleVisibility`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#togglevisibility) property if you must use a legend click to choose a series.
+By default, you can collapse the series visibility by clicking the legend. On the other hand, turn off the [`toggleVisibility`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#togglevisibility) property if you must use a legend click to choose a series.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -192,7 +208,7 @@ By default, series name will be displayed as legend. To skip the legend for a pa
## Legend title
-You can set title for legend using [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#title) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#legendsettings). The [`size`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#size), [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#color), [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#opacity),[`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#fontstyle), [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#fontweight), [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#fontfamily), [`textAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#textalignment), and [`textOverflow`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#textoverflow) of legend title can be customized by using the [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#titlestyle) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#legendsettings). The [`titlePosition`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. The [`maximumTitleWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#maximumlabelwidth) is used to set the width of the legend title. By default, it will be `100px`.
+You can set title for legend using [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#title) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#legendsettings). The [`size`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#size), [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#color), [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#opacity),[`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#fontstyle), [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#fontweight), [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#fontfamily), [`textAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#textalignment), and [`textOverflow`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#textoverflow) of legend title can be customized by using the [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#titlestyle) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#legendsettings). The [`titlePosition`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. The [`maximumTitleWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#maximumlabelwidth) is used to set the width of the legend title. By default, it will be `100px`.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -208,7 +224,7 @@ You can set title for legend using [`title`](https://ej2.syncfusion.com/angular/
## Arrow page navigation
-The page number will always be visible while using legend paging. It is now possible to disable the page number and enable page navigation with the left and right arrows. The [`enablePages`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#enablepages) property needs to be set to **false** in order to render the arrow page navigation.
+The page number will always be visible while using legend paging. It is now possible to disable the page number and enable page navigation with the left and right arrows. The [`enablePages`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#enablepages) property needs to be set to **false** in order to render the arrow page navigation.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -224,7 +240,7 @@ The page number will always be visible while using legend paging. It is now poss
## Legend item padding
-The [`itemPadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#itempadding) property can be used to adjust the space between the legend items.
+The [`itemPadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#itempadding) property can be used to adjust the space between the legend items.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
diff --git a/ej2-angular/Release-notes/34.1.30.md b/ej2-angular/Release-notes/34.1.30.md
new file mode 100644
index 00000000000..3be88c3987d
--- /dev/null
+++ b/ej2-angular/Release-notes/34.1.30.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for Angular Release Notes - v34.1.30
+description: Learn here about the controls in the Essential Studio for Angular Weekly Release - Release Notes - v34.1.30
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for Angular - v34.1.30 Release Notes
+
+{% include release-info.html date="July 09, 2026" version="v34.1.30" passed="79343" failed="0" %}
+
+{% directory path: _includes/release-notes/v34.1.30 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2869 | 2869 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8276 | 8276 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4140 | 4140 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16999 | 16999 | 0 | All Passed |
+| Dialog | 76 | 76 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5605 | 5605 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1390 | 1390 | 0 | All Passed |
+| Mention | 53 | 53 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 465 | 465 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5675 | 5675 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4734 | 4734 | 0 | All Passed |
+| sidebar | 92 | 92 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 133 | 133 | 0 | All Passed |
+| TreeGrid | 5022 | 5022 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-angular/Release-notes/34.1.31.md b/ej2-angular/Release-notes/34.1.31.md
new file mode 100644
index 00000000000..c4d71679cf6
--- /dev/null
+++ b/ej2-angular/Release-notes/34.1.31.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for Angular Release Notes - v34.1.31
+description: Learn here about the controls in the Essential Studio for Angular Weekly Release - Release Notes - v34.1.31
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for Angular - v34.1.31 Release Notes
+
+{% include release-info.html date="July 14, 2026" version="v34.1.31" passed="79360" failed="0" %}
+
+{% directory path: _includes/release-notes/v34.1.31 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2869 | 2869 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8277 | 8277 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4140 | 4140 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16999 | 16999 | 0 | All Passed |
+| Dialog | 76 | 76 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5608 | 5608 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1390 | 1390 | 0 | All Passed |
+| Mention | 54 | 54 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 258 | 258 | 0 | All Passed |
+| Multiselect Dropdown | 465 | 465 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5675 | 5675 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4734 | 4734 | 0 | All Passed |
+| sidebar | 92 | 92 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 133 | 133 | 0 | All Passed |
+| TreeGrid | 5033 | 5033 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-angular/Release-notes/34.1.32.md b/ej2-angular/Release-notes/34.1.32.md
new file mode 100644
index 00000000000..4966b7cf2b7
--- /dev/null
+++ b/ej2-angular/Release-notes/34.1.32.md
@@ -0,0 +1,101 @@
+---
+title: Essential Studio for Angular Release Notes - v34.1.32
+description: Learn here about the controls in the Essential Studio for Angular Weekly Release - Release Notes - v34.1.32
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for Angular - v34.1.32 Release Notes
+
+{% include release-info.html date="July 21, 2026" version="v34.1.32" passed="79627" failed="0" %}
+
+{% directory path: _includes/release-notes/v34.1.32 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 116 | 116 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| avatar | 43 | 43 | 0 | All Passed |
+| Block Editor | 2869 | 2869 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8277 | 8277 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 31 | 31 | 0 | All Passed |
+| Data Grid | 4180 | 4180 | 0 | All Passed |
+| Date Picker | 433 | 433 | 0 | All Passed |
+| Date Range Picker | 528 | 528 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 17065 | 17065 | 0 | All Passed |
+| Dialog | 76 | 76 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 214 | 214 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5615 | 5615 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 269 | 269 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1390 | 1390 | 0 | All Passed |
+| Mention | 56 | 56 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 261 | 261 | 0 | All Passed |
+| Multiselect Dropdown | 465 | 465 | 0 | All Passed |
+| OTP Input | 241 | 241 | 0 | All Passed |
+| Pivot Table | 5751 | 5751 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 630 | 630 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4743 | 4743 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 72 | 72 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 140 | 140 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 133 | 133 | 0 | All Passed |
+| TreeGrid | 5033 | 5033 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-angular/accordion/getting-started.md b/ej2-angular/accordion/getting-started.md
index 2fe299b589d..ea4fa87d168 100644
--- a/ej2-angular/accordion/getting-started.md
+++ b/ej2-angular/accordion/getting-started.md
@@ -124,13 +124,18 @@ In the `package.json` file, specify the ngcc package version with the `-ngcc` su
## Adding CSS reference
-Include the following CSS files from the `../node_modules/@syncfusion` folder in `[src/styles.css]`:
+Themes for the Syncfusion® component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/angular/documentation/appearance/overview) documentation.
+
+Install the Material 3 theme package using the following npm command:
+
+```bash
+npm install @syncfusion/ej2-material3-theme
+```
+
+Then add the following CSS reference to the **src/styles.css** file. This is the default global stylesheet registered under `styles` in `angular.json`:
```css
-@import '../node_modules/@syncfusion/ej2-base/styles/material3';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material3';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material3';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material3';
+@import "@syncfusion/ej2-material3-theme/styles/material3.css";
```
## Add Accordion component
diff --git a/ej2-angular/accumulation-chart/getting-started.md b/ej2-angular/accumulation-chart/getting-started.md
index 7779f9c53f9..e4d0797d397 100644
--- a/ej2-angular/accumulation-chart/getting-started.md
+++ b/ej2-angular/accumulation-chart/getting-started.md
@@ -1,22 +1,23 @@
---
layout: post
-title: Getting started with Angular Accumulation Chart component | Syncfusion
-description: Checkout and learn about Getting started with Angular Accumulation Chart component of Syncfusion Essential JS 2 and more details.
+title: Getting Started with Angular Accumulation Chart component | Syncfusion
+description: Check out and learn about Getting Started with Angular Accumulation Chart component of Syncfusion Essential JS 2 and more details.
platform: ej2-angular
-control: Getting started
+control: Getting Started
documentation: ug
domainurl: https://ej2.syncfusion.com
---
# Getting Started with Angular Accumulation Chart Component
-This section explains the steps required to create a simple accumulation chart and demonstrates the basic usage of the accumulation chart component.
+This section explains the steps required to create a simple accumulation chart and demonstrates the basic usage of the [Angular Accumulation Chart](https://www.syncfusion.com/angular-components/angular-charts) component.
> **Ready to streamline your Syncfusion® Angular development?** Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/angular/documentation/mcp-server/ai-coding-assistant/getting-started)
+
## Prerequisites
-Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® Angular UI components](https://ej2.syncfusion.com/angular/documentation/system-requirement).
+Before getting started, ensure that your environment meets the [system requirements for Syncfusion® Angular UI components](https://ej2.syncfusion.com/angular/documentation/system-requirement), which covers supported Node.js, Angular, and `@syncfusion/ej2-angular-charts` versions.
## Before You Begin
@@ -27,17 +28,11 @@ The main files used in this guide are:
- `src/app/app.ts` — Defines the root standalone component.
- `src/index.html` — Contains the Angular root element.
-N> In newer Angular CLI standalone projects, the root component may be generated as `src/app/app.ts`. In NgModule-based Angular projects, the equivalent file is typically `src/app/app.component.ts`.
-
-N> If your application uses an older NgModule-based structure, import `AccumulationChartModule` in the application module, such as `app.module.ts`, instead of adding it to the standalone component `imports` collection.
-
-## Step 1: Create a Project Folder
+> **Note:** In newer Angular CLI standalone projects, the root component may be generated as `src/app/app.ts`. In NgModule-based Angular projects, the equivalent file is typically `src/app/app.component.ts`.
-Create a folder named `my-project` in your desired location. This folder will contain your Syncfusion Accumulation Chart Angular project.
+> **Note:** If your application uses an older NgModule-based structure, import `AccumulationChartModule` in the application module, such as `app.module.ts`, instead of adding it to the standalone component `imports` collection.
-## Step 2: Set up the Angular environment
-
-Start by opening your project in the terminal on your system **(Command Prompt, PowerShell, or Terminal)**.
+## Step 1: Install the Angular CLI
Use [Angular CLI](https://github.com/angular/angular-cli) to create and manage Angular applications. Install Angular CLI globally using the following command:
@@ -45,17 +40,23 @@ Use [Angular CLI](https://github.com/angular/angular-cli) to create and manage A
npm install -g @angular/cli
```
-## Step 3: Create an Angular application
+Verify the installation:
+
+```bash
+ng version
+```
+
+## Step 2: Create an Angular application
-Create a new Angular application using the following command.
+Create a new Angular application using the following command:
```bash
ng new my-accumulation-chart-app
```
-During project creation, Angular CLI may prompt you to choose stylesheet, SSR/SSG, and AI tool configuration options. For this basic Accumulation Chart sample, you can use the following options:
+* This command will prompt you to choose stylesheet, SSR/SSG, and AI tool configuration options. For this basic Accumulation Chart sample, you can use the following options:
-* **Stylesheet system**: Choose any option. This guide uses `CSS` for simplicity and applies the Syncfusion® Tailwind 3 theme through CSS imports.
+* **Stylesheet system**: Choose any option. This guide uses `CSS` for simplicity and applies the Syncfusion Tailwind 3 theme via CSS imports.
* **SSR and SSG/Pre-rendering**: Select `No`.
* **AI tools configuration**: Select `None`.
@@ -65,19 +66,19 @@ Navigate to the project folder:
cd my-accumulation-chart-app
```
-## Step 4: Install the Syncfusion® Angular Accumulation Chart package
+Open the project in Command Prompt, PowerShell, or Terminal before proceeding to the next step.
-All Syncfusion Essential® JS 2 packages are available in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry.
+## Step 3: Install the Syncfusion® Angular Accumulation Chart package
-Install the Angular Accumulation Chart package using the following command:
+All Syncfusion Essential® JS 2 packages are available in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. The [Angular Chart package](https://www.npmjs.com/package/@syncfusion/ej2-angular-charts) can be installed using the following command:
```bash
-npm install @syncfusion/ej2-angular-charts --save
+npm install @syncfusion/ej2-angular-charts
```
-N> Installing `@syncfusion/ej2-angular-charts` automatically installs the required dependency packages.
+> **Note:** Installing `@syncfusion/ej2-angular-charts` automatically installs the required dependency packages.
-## Step 5: Register the Accumulation Chart module and add the component
+## Step 4: Register the Accumulation Chart module and add the component
Import `AccumulationChartModule` from `@syncfusion/ej2-angular-charts` and add it to the `imports` collection of the standalone component. Then, add the Angular Accumulation Chart component using the `` selector in the component template.
@@ -91,78 +92,51 @@ import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
selector: 'app-root',
standalone: true,
imports: [AccumulationChartModule],
- providers: [],
template: ``
})
export class App {}
```
-This renders an empty accumulation chart in the application.
+This renders an empty accumulation chart in the application's view.
-N> The component selector must match the root element used in the `src/index.html` file. Angular CLI commonly uses ``, so this example uses `selector: 'app-root'`.
+> **Note:** The component selector must match the root element used in the `src/index.html` file. Angular CLI commonly uses ``, so this example uses `selector: 'app-root'`.
-## Step 6: Create your first Accumulation Chart with data source and series type
+Run the application with `npm start` and verify that an empty accumulation chart renders before proceeding to the next step.
-This section explains how to create a simple accumulation chart by binding data and rendering a series using Angular Accumulation Chart components.
+## Step 5: Create your first Accumulation Chart with data source and series type
-The following example demonstrates how to visualize monthly data using a pie chart. It also shows how to bind data and map fields using the `dataSource`, `xName`, and `yName` properties, along with configuring the legend using the `legendSettings` property.
+This section explains how to create a simple accumulation chart by binding data and rendering a series using the Angular Accumulation Chart component.
+
+The following example demonstrates how to visualize monthly data using a pie chart. It also shows how to bind data, map fields using the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#datasource), [xName](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#xname) , and [yName](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#yname) properties, and configure the legend using the [legendSettings](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/index-default#legendsettings) property.
Update the `src/app/app.ts` file as follows:
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { AccumulationChartModule, PieSeriesService, AccumulationLegendService } from '@syncfusion/ej2-angular-charts';
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/chart/accumulation-chart-data-cs1/src/app.ts %}
+{% endhighlight %}
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [AccumulationChartModule],
- providers: [PieSeriesService, AccumulationLegendService],
- template: `
-
-
-
-
-
-
- `
-})
-export class App implements OnInit {
- public piedata?: Object[];
- public legendSettings?: Object;
- ngOnInit(): void {
- this.piedata = [
- { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
- { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
- { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
- { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
- { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
- { x: 'Nov', y: 9 }, { x: 'Dec', y: 3.5 }
- ];
- this.legendSettings = {
- visible: false
- };
- }
-}
-```
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart/accumulation-chart-data-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/chart/accumulation-chart-data-cs1" %}
-In this example:
+The chart renders a pie with one slice for each month (Jan–Dec) sized according to the data values. Hovering over a slice displays a tooltip with the month and value, and each slice can be pulled out individually for emphasis.
-* [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/index-default#legendsettings) controls the visibility and appearance of the accumulation chart legend.
-* [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#datasource) provides the JSON data used to render the accumulation chart.
-* [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#type) specifies the accumulation series type, such as Pie, Pyramid, or Funnel.
-* [`xName`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#xname) maps the category field (for example, x) from the data source.
-* [`yName`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#yname) maps the numeric field (for example, y) from the data source.
-* [``] and [``] directives are used to define and render an accumulation series in the chart.
+The following table summarizes the key properties used in this example:
-## Step 7: Run the application
+| Properties | Description |
+| --- | --- |
+| [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/index-default#legendsettings) | Controls the visibility and appearance of the accumulation chart legend. In this sample, the legend is hidden by setting `visible: false`. |
+| [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#datasource) | Provides the JSON data used to render the accumulation chart. |
+| [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#type) | Specifies the accumulation series type, such as Pie, Pyramid, or Funnel. |
+| [`xName`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#xname) | Maps the category field (for example, `x`) from the data source. |
+| [`yName`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseries#yname) | Maps the numeric field (for example, `y`) from the data source. |
+| [``](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseriesdirective) and [``](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationseriesdirective) | Directives used to define and render an accumulation series in the chart. |
+
+## Step 6: Run the application
Run the application using the following command:
@@ -170,6 +144,22 @@ Run the application using the following command:
npm start
```
-Open the generated local URL (for example, `http://localhost:4200/`) from terminal in the browser. The application displays the accumulation chart as shown below:
+Open the generated local URL (for example, `http://localhost:4200/`) from the terminal in the browser. The application displays a pie chart showing monthly distribution from January to December, as shown below:
+
+
+
+## Troubleshooting
+
+If the accumulation chart does not render as expected, check for these common issues:
+
+* **"No provider for PieSeriesService" error**: Confirm that `PieSeriesService` and `AccumulationLegendService` are added to the component's `providers` array. Each accumulation series type requires its corresponding service.
+* **Chart not visible**: Verify that the `` element has a unique `id` and that the component's `selector` matches the root element used in `src/index.html` (commonly ``).
+* **Data not displayed**: Check that the `xName` and `yName` values match the field names in your data source exactly, and that the `dataSource` is assigned before the chart renders.
+* **Build errors**: Run `ng version` to confirm that Node.js, Angular CLI, and `@syncfusion/ej2-angular-charts` are on supported versions, and check the terminal output for the specific error.
+* **Port already in use**: If `npm start` fails because port `4200` is in use, run `ng serve --port 4201` (or another free port) instead.
+
+## See also
-
+* [Legend](legend) — Configure the accumulation chart legend.
+* [Data Label](data-label) — Customize the data labels displayed on slices.
+* [Pie, Doughnut, Pyramid, and Funnel Charts](pie-dough-nut) — Explore other accumulation chart types.
diff --git a/ej2-angular/ai-assistview/getting-started.md b/ej2-angular/ai-assistview/getting-started.md
index bac2dc499f8..a0599072e55 100644
--- a/ej2-angular/ai-assistview/getting-started.md
+++ b/ej2-angular/ai-assistview/getting-started.md
@@ -12,48 +12,91 @@ domainurl: ##DomainURL##
This section explains how to create a simple **AI AssistView** component and configure its available functionalities in Angular.
-## Set up Angular environment
+## Prerequisites
-You can use the [Angular CLI](https://github.com/angular/angular-cli) to set up your Angular applications. To install the Angular CLI, use the following command.
+| Requirement | Version |
+|-------------|---------|
+| Angular | 12 and above |
+| Node.js | 14.0.0 or above, Recommended: Latest Version |
-```
+> Note: This guide supports recent Angular versions including Angular 21 and standalone components. For detailed compatibility, refer to the Angular version support matrix in the Syncfusion docs.
+
+### Angular supported versions
+
+| Angular Version | Minimum Syncfusion® Angular AI AssistView / Interactive Chat Version |
+|-----------------|----------------------------------------------------------------------------------|
+| [Angular v20](https://www.syncfusion.com/blogs/post/whats-new-in-angular-20) | 29.2.8 |
+| [Angular v19](https://blog.angular.dev/meet-angular-v19-7b29dfd05b84/) | 26.1.35 |
+| [Angular v18](https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe/) | 25.2.3 |
+| [Angular v17](https://blog.angular.io/introducing-angular-v17-4d7033312e4b/) | 23.2.4 |
+| [Angular v16](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d/) | 21.1.39 |
+| [Angular v15](https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8/) | 20.4.38 |
+| [Angular v14](https://blog.angular.io/angular-v14-is-now-available-391a6db736af/) | 20.2.36 |
+| [Angular v13](https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296/) | 19.4.38 and above |
+| [Angular v12](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49/) | 19.3.43 |
+
+### Browser Support
+
+| Browser | Supported Versions |
+|:--------|:-------------------|
+| Google Chrome, including Android & iOS | Latest 2 versions |
+| Mozilla Firefox | Latest version |
+| Microsoft Edge | Latest 2 versions |
+| Apple Safari, including iOS | Latest 2 versions |
+
+## Setup the Angular application
+
+A straightforward approach to beginning with Angular is to create a new application using the [Angular CLI](https://github.com/angular/angular-cli). Install Angular CLI globally with the following command:
+
+```bash
npm install -g @angular/cli
```
-## Create an Angular Application
+> **Angular 21 Standalone Architecture:** Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the [Standalone Guide](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone).
-Create a new Angular application using the following Angular CLI command:
+## Create a new application
+
+With Angular CLI installed, execute this command to generate a new application:
```bash
-ng new my-app
+ng new syncfusion-angular-app
```
-This command will prompt you for a few settings for the new project, such as which stylesheet format to use.
-
+* This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
-By default, it will create a CSS-based application.
+```bash
+? Which stylesheet format would you like to use? (Use arrow keys)
+> CSS [ https://developer.mozilla.org/docs/Web/CSS ]
+ Sass (SCSS) [ https://sass-lang.com/documentation/syntax#scss ]
+ Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
+ Less [ http://lesscss.org ]
+```
-Then the CLI also displays an additional prompt asking whether to enable Server‑Side Rendering (SSR) and Static Site Generation (SSG), as shown below:
+* By default, a CSS-based application is created. Use SCSS if required:
-
+```bash
+ng new syncfusion-angular-app --style=scss
+```
-For this setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.
+* During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.
-Then the CLI displays another prompt related to AI tooling support, as shown below:
+
-
+* Select the required AI tool or 'none' if you do not need any AI tool.
-Any preferred option can be selected based on the development workflow or project needs.
+
-Next, navigate to the project folder:
+* Navigate to your newly created application directory:
```bash
-cd my-app
+cd syncfusion-angular-app
```
-## Adding Syncfusion AI AssistView package
+> Note: In Angular 19 and below, it uses `app.ts`, `app.component.html`, `app.component.css` etc. In Angular 20+, the CLI generates a simpler structure with `src/app/app.ts`, `app.html`, and `app.css` (no `.component.` suffixes).
+
+## Adding Syncfusion® Angular AI AssistView package
-All available Essential JS 2 packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. Install the AI AssistView component with the following command:
+To install the AI AssistView package, use the following command:
```bash
npm install @syncfusion/ej2-angular-interactive-chat
@@ -61,48 +104,34 @@ npm install @syncfusion/ej2-angular-interactive-chat
## Adding CSS reference
-To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
-
-```bash
-npm install @syncfusion/ej2-tailwind3-theme --save
-```
+Themes for Syncfusion® AI AssistView components can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/angular/documentation/appearance/overview) documentation.
-To render the AI AssistView component, add the below import in the [src/styles.css] file which loads all the required dependency styles, as shown below:
+Install the Material 3 theme package using the following command:
-```css
-@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/ai-assistview/index.css";
-```
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
-## Adding AI AssistView component
+npm install @syncfusion/ej2-material3-theme --save
-Modify the template in the [src/app/app.component.ts] file to render the Angular AI AssistView component. Add the component by applying the [`ejs-aiassistview`] attribute directive to a `div` element within the `template` section of the `app.component.ts` file.
+{% endhighlight %}
+{% endtabs %}
-```javascript
-import { Component } from '@angular/core';
-import { AIAssistViewModule } from '@syncfusion/ej2-angular-interactive-chat';
+Then add the following CSS reference to the `src/styles.css` file:
-@Component({
- imports: [ AIAssistViewModule ],
- standalone: true,
- selector: 'app-root',
- // specifies the template string for the AI AssistView component
- template: ``
-})
-export class AppComponent { }
-```
+{% tabs %}
+{% highlight css tabtitle="style.css" %}
-## Run the application
+@import "../node_modules/@syncfusion/ej2-material3-theme/styles/ai-assistview/index.css";
-After completing the configuration required to render a basic AI AssistView, run the following command to display the output in your default browser.
+{% endhighlight %}
+{% endtabs %}
-```
-ng serve
-```
+## Adding AI AssistView component
-The following example illustrates the output in your browser.
+Modify the template in the **src/app/app.ts** file to render the AI AssistView component. Add the Angular AI AssistView by using `` selector in `template` section of the **app.ts** file.
{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
{% include code-snippet/ai-assistview/getting-started/src/app.component.ts %}
{% endhighlight %}
@@ -113,6 +142,27 @@ The following example illustrates the output in your browser.
{% previewsample "page.domainurl/samples/ai-assistview/getting-started" %}
+## Registering Your Syncfusion License
+
+Before using Syncfusion components, generate a license key from the [Syncfusion License Dashboard](https://www.syncfusion.com/account/downloads) and register
+
+Open the `main.ts` file and add the following code:
+
+```typescript
+import { registerLicense } from '@syncfusion/ej2-base';
+registerLicense('YOUR_LICENSE_KEY');
+```
+
+> **Note:** A valid Syncfusion license is required for production use. If a valid license is not registered, a trial license warning message will be displayed when the application runs.
+
+## Run the application
+
+After completing the configuration required to render a basic AI AssistView, run the following command to display the output in your default browser.
+
+```
+ng serve
+```
+
> **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added.
## Configure suggestions and responses
@@ -120,7 +170,7 @@ The following example illustrates the output in your browser.
Use the [promptSuggestions](../api/ai-assistview#promptsuggestions) property to display a list of predefined suggestion chips. To provide custom responses, handle the [promptRequest](../api/ai-assistview#promptrequest) event, which is triggered when a user query is sent.
{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
{% include code-snippet/ai-assistview/defaultprompts/src/app.component.ts %}
{% endhighlight %}
@@ -130,4 +180,31 @@ Use the [promptSuggestions](../api/ai-assistview#promptsuggestions) property to
{% endtabs %}
{% previewsample "page.domainurl/samples/ai-assistview/defaultprompts" %}
-```
\ No newline at end of file
+
+### Production Build
+
+To create an optimized production build, run:
+
+```bash
+ng build
+```
+
+This command compiles the application and generates the production-ready files in the `dist/` directory.
+
+To preview the production build locally, run:
+
+```bash
+npx http-server dist
+```
+
+Then open the URL displayed in the terminal.
+
+## Troubleshooting
+
+- **AI AssistView styles are not applied:** Ensure the required Syncfusion theme CSS is imported in `src/styles.css`.
+- **Trial license warning message:** Register a valid Syncfusion license key using the `registerLicense()` method from `@syncfusion/ej2-base`.
+- **Port 4200 is already in use:** Stop the conflicting process or run the application on a different port:
+
+ ```bash
+ ng serve --port 3000
+ ```
diff --git a/ej2-angular/ai-tools/release-notes.md b/ej2-angular/ai-tools/release-notes.md
index 20f2d9250c1..176c39bd341 100644
--- a/ej2-angular/ai-tools/release-notes.md
+++ b/ej2-angular/ai-tools/release-notes.md
@@ -1,55 +1,75 @@
---
layout: post
-title: Release Notes | Syncfusion Angular MCP Server
-description: Version history and release notes for the Syncfusion Angular MCP Server, including new features, breaking changes, and updates for the AI-powered Angular development assistant.
-control: Release Notes
+title: Release Notes - Syncfusion Angular AI and Smart Tooling | Syncfusion
+description: Explore the release notes for Syncfusion Angular AI and Smart Tooling, covering MCP Server, Skills, and Agentic UI Builder updates with new features, breaking changes, and stability improvements across all versions.
+control: Syncfusion Angular AI and Smart Tooling Release Notes
platform: ej2-angular
documentation: ug
domainurl: ##DomainURL##
---
-# Syncfusion Angular MCP Server Release Notes
+# Syncfusion Angular AI and Smart Tooling Release Notes
-This document provides information about the changes and new features included in each version of the [@syncfusion/angular-assistant](https://www.npmjs.com/package/@syncfusion/angular-assistant) MCP server package.
+This document provides information about the changes and new features included in each version of the Syncfusion Angular AI and Smart Tooling, including the [@syncfusion/angular-assistant](https://www.npmjs.com/package/@syncfusion/angular-assistant) MCP Server, Skills, Agentic UI Builder and so on.
-## (v2.0.1) – February 26, 2026
+## MCP Server
-### Bug Fixes
+**(v3.0.0) - July 21, 2026**
-- Resolved tool identifier issue and updated package dependencies for improved stability.
+**Breaking Changes**
-## (v2.0.0) – February 23, 2026
+- The **UI Builder** tool has been redefined as an agent-skill based experience and is no longer available within this server. For more information about the **Agentic UI Builder**, refer to this [link](https://www.syncfusion.com/explore/agentic-ui-builder).
-### Features
+**(v2.0.1) - February 26, 2026**
-- Introduced **Agentic UI Builder** — a composite MCP tool that analyzes your UI requirements and coordinates specialized tools (Layout, Component, and Styling) to generate complete Angular applications using natural language prompts, significantly boosting your productivity and accelerating development workflow.
-- Agentic UI Builder sub-tools:
- - **Layout Tool** (#sf_angular_layout) — Generates responsive UI blocks, grids, dashboards, and pre-built patterns.
- - **Component Tool** (#sf_angular_component) — Provides full metadata, APIs, props, events, and configuration for 145+ Syncfusion Angular components.
- - **Styling Tool** (#sf_angular_style) — Applies theme configurations (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), dark mode, color customization, and icon integration.
-- Unlimited, unrestricted access with strict privacy (no project file access, no prompt storage or training).
+**Bug Fixes**
+
+- Resolved tool identifier issue and updated package dependencies for improved stability.
-### Breaking Changes
+**(v2.0.0) - February 23, 2026**
+
+**Breaking Changes**
- Renamed the coding assistant tool identifier from **`SyncfusionAngularAssistant`** to **`sf_angular_assistant`** for consistency, brevity, and improved user experience.
-## (v1.0.1) – February 10, 2026
+**(v1.0.1) - February 10, 2026**
-### Features
+**Features**
- Updated package dependencies to resolve security vulnerabilities and enhance stability.
-## (v1.0.0) – December 16, 2025
+**(v1.0.0) - December 16, 2025**
-### Features
+**Features**
- Added support for API key validation through file path reference.
- Updated package dependencies and security standards for improved reliability and safety.
-## (v0.1.0) – October 10, 2025
+**(v0.1.0) - October 10, 2025**
-### Features
+**Features**
- Initial release of AI Coding Assistant for Syncfusion Angular components.
- Provides context-aware assistance for building Angular applications with Syncfusion components.
- Includes support for component APIs, properties, and troubleshooting guidance.
+
+## Skills
+
+**Features**
+
+- Introduced **Agent Skills** — a set of lightweight, modular capabilities that extend the AI Coding Assistant with specialized knowledge, including pre-defined instructions, best practices, and curated code patterns for building Angular applications with Syncfusion components.
+- Each skill is defined in a simple, readable `SKILL.md` file that specifies the correct setup, required modules, current APIs and patterns, and what a valid implementation looks like for a given component.
+- Works as a standard, lightweight approach supported by modern AI development tools: install skills, the tool detects them, and the relevant skill is automatically applied to the user's prompt.
+
+## Agentic UI Builder
+
+**(v2.0.0) - February 23, 2026**
+
+**Features**
+
+- Introduced **Agentic UI Builder** — a composite MCP tool that analyzes your UI requirements and coordinates specialized tools (Layout, Component, and Styling) to generate complete Angular applications using natural language prompts, significantly boosting your productivity and accelerating development workflow.
+- Agentic UI Builder sub-tools:
+ - **Layout Tool** (#sf_angular_layout) — Generates responsive UI blocks, grids, dashboards, and pre-built patterns.
+ - **Component Tool** (#sf_angular_component) — Provides full metadata, APIs, props, events, and configuration for 145+ Syncfusion Angular components.
+ - **Styling Tool** (#sf_angular_style) — Applies theme configurations (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), dark mode, color customization, and icon integration.
+- Unlimited, unrestricted access with strict privacy (no project file access, no prompt storage or training).
diff --git a/ej2-angular/appbar/getting-started.md b/ej2-angular/appbar/getting-started.md
index 2feff4763d1..27b6fe9fc0b 100644
--- a/ej2-angular/appbar/getting-started.md
+++ b/ej2-angular/appbar/getting-started.md
@@ -145,11 +145,18 @@ export class AppComponent { }
## Adding CSS reference
-Add AppBar component's styles as given below in `style.css`.
+Themes for the Syncfusion® component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/angular/documentation/appearance/overview) documentation.
+
+Install the Material 3 theme package using the following npm command:
+
+```bash
+npm install @syncfusion/ej2-material3-theme
+```
+
+Then add the following CSS reference to the **src/styles.css** file. This is the default global stylesheet registered under `styles` in `angular.json`:
```css
-@import "../node_modules/@syncfusion/ej2-base/styles/material3";
-@import "../node_modules/@syncfusion/ej2-navigations/styles/material3";
+@import "@syncfusion/ej2-material3-theme/styles/material3.css";
```
## Running the application
diff --git a/ej2-angular/auto-complete/getting-started.md b/ej2-angular/auto-complete/getting-started.md
index 696e736568c..b9a3aec5aec 100644
--- a/ej2-angular/auto-complete/getting-started.md
+++ b/ej2-angular/auto-complete/getting-started.md
@@ -3,41 +3,26 @@ layout: post
title: Getting started with Angular AutoComplete component | Syncfusion
description: Learn how to get started with the Syncfusion Angular AutoComplete component, including setup, installation, data binding, and basic configuration.
platform: ej2-angular
-control: Getting started
+control: AutoComplete
documentation: ug
domainurl: ##DomainURL##
---
# Getting started with Angular AutoComplete component
-This guide demonstrates how to set up and configure the Syncfusion Angular AutoComplete component, from initial installation through enabling core features like data binding and popup customization. The AutoComplete component provides suggestions as users type, offering filtering and selection capabilities for efficient text input in various scenarios.
+The AutoComplete component provides suggestions as users type, offering filtering and selection capabilities for efficient text input in various scenarios.
-> Note: This guide supports **Angular 21** and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility). Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.
+This guide provides step-by-step instructions for setting up an Angular project with TypeScript using Angular CLI, and integrating Syncfusion® Angular AutoComplete component. The recommended setup below targets modern Angular (CLI `ng add`). For module-based or framework host setups, see [See Also](#see-also).
-> **Ready to streamline your Syncfusion® Angular development?** Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/angular/documentation/ai-coding-assistant/overview)
+The [Angular CLI](https://github.com/angular/angular-cli) simplifies creating, managing, and building Angular applications so you can start development quickly.
## Prerequisites
-Ensure your development environment meets the [System Requirements for Syncfusion Angular UI Components](../system-requirement).
+- Install a supported [Node.js](https://nodejs.org/en) LTS release and npm (or another Node package manager) before continuing.
+- Ensure your environment meets the [System Requirements for Syncfusion® Angular UI Components](../system-requirement).
+- Supported Angular and Syncfusion package combinations are listed in the [Version Compatibility](../upgrade/version-compatibility) guide. This walkthrough assumes Angular 17+ with the default application scaffolding (`src/app/app.ts` or the equivalent root component generated by your CLI version).
-## Dependencies
-
-The following dependencies are required to use the AutoComplete component in your application.
-
-```javascript
-|-- @syncfusion/ej2-angular-dropdowns
- |-- @syncfusion/ej2-base
- |-- @syncfusion/ej2-data
- |-- @syncfusion/ej2-lists
- |-- @syncfusion/ej2-inputs
- |-- @syncfusion/ej2-navigations
- |-- @syncfusion/ej2-notifications
- |-- @syncfusion/ej2-popups
- |-- @syncfusion/ej2-buttons
- |-- @syncfusion/ej2-angular-base
-```
-
-## SetUp the Angular application
+## Setup the Angular application
A straightforward approach to beginning with Angular is to create a new application using the [Angular CLI](https://github.com/angular/angular-cli). Install Angular CLI globally with the following command:
@@ -47,14 +32,6 @@ npm install -g @angular/cli
> **Angular 21 Standalone Architecture:** Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the [Standalone Guide](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone).
-### Installing a specific version
-
-To install a particular version of Angular CLI, use:
-
-```bash
-npm install -g @angular/cli@21.0.0
-```
-
## Create a new application
With Angular CLI installed, execute this command to generate a new application:
@@ -97,167 +74,86 @@ cd syncfusion-angular-app
> Note: In Angular 19 and below, it uses `app.component.ts`, `app.component.html`, `app.component.css` etc. In Angular 20+, the CLI generates a simpler structure with `src/app/app.ts`, `app.html`, and `app.css` (no `.component.` suffixes).
-## Adding Syncfusion® Angular packages
-
-Syncfusion®'s Angular component packages are available on [npmjs.com](https://www.npmjs.com/search?q=ej2-angular). To use Syncfusion® Angular components, install the necessary package.
+## Adding the Syncfusion® Angular AutoComplete package
-This guide uses the [Angular AutoComplete component](https://www.syncfusion.com/angular-components/angular-autocomplete) for demonstration. Add the Angular AutoComplete component with:
+To install the **Syncfusion® Angular AutoComplete** package, use the following command:
```bash
ng add @syncfusion/ej2-angular-dropdowns
```
-This command will perform the following configurations:
+The `ng add` command installs the package, registers it in `package.json`, and configures the required entries in your workspace automatically.
-- Add the `@syncfusion/ej2-angular-dropdowns` package and peer dependencies to your `package.json`.
-- Import the AutoComplete component in your application.
-- Register the default Syncfusion® Material theme in `angular.json`.
+If `ng add` is unavailable in your setup, install the package manually with:
-For more details on version compatibility, refer to the [Version Compatibility](https://ej2.syncfusion.com/angular/documentation/upgrade/version-compatibility) section.
-
-Syncfusion® offers two package structures for Angular components:
-1. Ivy library distribution package [format](https://angular.dev/tools/libraries/angular-package-format)
-2. Angular compatibility compiler (ngcc), which is Angular's legacy compilation pipeline.
-Syncfusion®'s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute:
-```bash
-ng add @syncfusion/ej2-angular-dropdowns
-```
-For applications not compiled with Ivy, use the `ngcc` tagged packages:
-> The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of IVY compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following [FAQ](https://ej2.syncfusion.com/angular/documentation/common/troubleshooting/ngcc-compatibility).
-```bash
-npm add @syncfusion/ej2-angular-dropdowns@32.1.19-ngcc
+```bash
+npm install @syncfusion/ej2-angular-dropdowns
```
-## Import Syncfusion® CSS styles
+## Adding CSS reference
-Syncfusion® Angular component themes can be added in various ways: via CSS or SCSS styles from npm packages, CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio).
+Themes for the Syncfusion® AutoComplete component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/angular/documentation/appearance/overview) documentation.
-The `Material` theme is added to your `styles.css` when you run `ng add` (this happens automatically by default).
+Install the Material 3 theme package using the following npm command:
+
+```bash
+npm install @syncfusion/ej2-material3-theme
+```
-To stylize only specific Syncfusion® components, import the necessary styles. For example, to style only the AutoComplete component:
+Then add the following CSS reference to the **src/styles.css** file. This is the default global stylesheet registered under `styles` in `angular.json`:
```css
-@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/material3.css';
+@import "@syncfusion/ej2-material3-theme/styles/material3.css";
```
-> Ensure that the import order aligns with the component's dependency sequence.
-
-For using SCSS styles, refer to [this guide](https://ej2.syncfusion.com/angular/documentation/common/how-to/sass).
+## Add Syncfusion® AutoComplete component
-## Add AutoComplete component
+After package and theme setup, update the root component. File name and class name can vary by Angular CLI version (`src/app/app.ts` with `export class App`, or `app.component.ts` with `AppComponent`). Replace the root component content with the sample below, or merge the AutoComplete import, template, and data into your generated file.
-Modify the template in [src/app/app.ts] file to render the AutoComplete component.
-Add the Angular AutoComplete by using `` selector in **template** section of the app.ts file.
+> For the full property list, see the [AutoComplete API reference](https://ej2.syncfusion.com/angular/documentation/api/auto-complete/index-default).
```typescript
-import { Component, OnInit } from '@angular/core';
-import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
+import { Component } from '@angular/core';
+import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
@Component({
- imports: [
- AutoCompleteModule
- ],
- standalone: true,
- selector: 'app-root',
- // specifies the template string for the AutoComplete component
- template: ``
+ selector: 'app-root',
+ imports: [ AutoCompleteModule ],
+ templateUrl: './app.html',
+ styleUrl: './app.css',
})
-export class AppComponent implements OnInit {
-
- ngOnInit(): void {
- }
+export class App {
+ public sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Rugby', 'Snooker', 'Tennis'];
}
-```
-
-## Binding data source
-Bind data to the AutoComplete component using the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/auto-complete/index-default#datasource) property. The property accepts either an array of JavaScript objects or a [DataManager](https://ej2.syncfusion.com/angular/documentation/auto-complete/data-binding) instance.
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
+```
+Place the following markup in the component template file referenced by `templateUrl` (for example, `src/app/app.html`):
-@Component({
- imports: [
- AutoCompleteModule
- ],
- standalone: true,
- selector: 'app-root',
- // specifies the template string for the AutoComplete component
- template: ``
-})
-export class App implements OnInit {
- public sportsData: string[] = [];
- ngOnInit(): void {
- this.sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Rugby', 'Snooker', 'Tennis'];
- }
-}
+```html
+
```
## Running the application
-Use the following command to run the application in the browser.
+From the project root:
```bash
ng serve
```
-The following example illustrates the output in your browser.
-
-{% tabs %}
-{% highlight ts tabtitle="app.ts" %}
-{% include code-snippet/autocomplete/getting-started-cs11/src/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/autocomplete/getting-started-cs11/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/samples/autocomplete/getting-started-cs11" %}
+When the build succeeds, the CLI reports a local URL (default: http://localhost:4200). Open that URL in a browser to view the AutoComplete. If the port is already in use, the CLI prompts for another port, or you can run `ng serve --port 4201`.
-## Configure the popup list
+Stop the server with `Ctrl+C` in the terminal.
-By default, the width of the popup list automatically adjusts to match the AutoComplete input element's width, and the height defaults to 300px.
-
-The height and width of the popup list can be customized using the [popupHeight](https://ej2.syncfusion.com/angular/documentation/api/auto-complete/index-default#popupheight) and [popupWidth](https://ej2.syncfusion.com/angular/documentation/api/auto-complete/index-default#popupwidth) properties.
-
-In the following sample, the popup list's width and height are configured.
-
-{% tabs %}
-{% highlight ts tabtitle="app.ts" %}
-{% include code-snippet/autocomplete/getting-started-cs12/src/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/autocomplete/getting-started-cs12/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/samples/autocomplete/getting-started-cs12" %}
-
-## Two-way binding
-
-In AutoComplete, the `value` property supports two-way binding functionality. The following example demonstrates how to use two-way binding in the AutoComplete component.
-
-{% tabs %}
-{% highlight ts tabtitle="app.ts" %}
-{% include code-snippet/autocomplete/getting-started-cs13/src/app.component.ts %}
-{% endhighlight %}
+The following example illustrates the output in your browser.
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/autocomplete/getting-started-cs13/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/samples/autocomplete/getting-started-cs13" %}
+{% previewsample "page.domainurl/samples/autocomplete/getting-started-cs11" %}
## See Also
-* [How to bind the data](./data-binding)
+* [Getting Started with Angular Standalone](./angular-standalone) — deeper standalone-focused walkthrough
+* [Getting Started ASP.NET Core with Angular using Project Template](./aspnet-core)
+* [Getting Started with Angular CLI as frontend in ASP.NET MVC](./aspnet-mvc)
+* [Getting Started with Ionic and Angular](../frameworks-and-feature/ionic)
+* [Getting Started with Angular and Electron](../frameworks-and-feature/electron)
+* [Upgrade Guide](../upgrade/upgrading-syncfusion)
\ No newline at end of file
diff --git a/ej2-angular/avatar/getting-started.md b/ej2-angular/avatar/getting-started.md
index 31202142c0a..d674e7e37ab 100644
--- a/ej2-angular/avatar/getting-started.md
+++ b/ej2-angular/avatar/getting-started.md
@@ -95,7 +95,7 @@ Syncfusion® provides two types of package s
### Ivy library distribution package
-Syncfusion® Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
+Syncfusion® Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://v12.angular.io/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
Add [`@syncfusion/ej2-angular-layouts`](https://www.npmjs.com/package/@syncfusion/ej2-angular-layouts/v/20.2.38) package to the application.
@@ -121,26 +121,23 @@ To specify the ngcc package in the `package.json` file, add the suffix `-ngcc` w
>Note: If the ngcc tag is not specified during installation, the Ivy Library Package will be installed and may display warnings for incompatible Angular versions.
-## Adding style sheet to the application
-To render the Avatar component, import the required stylesheets in the `[src/styles.css]` file:
+## Adding CSS reference
-```css
-@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-layouts/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-angular-layouts/styles/material3.css';
+Themes for the Syncfusion® component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/angular/documentation/appearance/overview) documentation.
+
+Install the Material 3 theme package using the following npm command:
+
+```bash
+npm install @syncfusion/ej2-material3-theme
```
-Alternatively, import the styles directly relative to the **node_modules** folder based on your CSS file's location, as shown below:
+Then add the following CSS reference to the **src/styles.css** file. This is the default global stylesheet registered under `styles` in `angular.json`:
```css
-@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
-@import 'node_modules/@syncfusion/ej2-layouts/styles/material3.css';
-@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material3.css';
+@import "@syncfusion/ej2-material3-theme/styles/material3.css";
```
->Note: To use combined component styles, refer to Syncfusion® [`CRG`](https://crg.syncfusion.com) (Custom Resource Generator) for your application.
-
## Adding Avatar to the application
The Avatar component uses CSS classes to display user representations. Modify the `template` in the `app.component.ts` file to render the Avatar component.
diff --git a/ej2-angular/badge/getting-started.md b/ej2-angular/badge/getting-started.md
index 871a9a9c0ff..43615e2199a 100644
--- a/ej2-angular/badge/getting-started.md
+++ b/ej2-angular/badge/getting-started.md
@@ -124,32 +124,22 @@ For applications not compiled with Ivy, use the `ngcc` tagged packages:
npm add @syncfusion/ej2-angular-notifications@32.1.19-ngcc
```
-## Adding stylesheet to the application
+## Adding CSS reference
-Syncfusion® Angular component themes can be added in various ways: via CSS or SCSS styles from npm packages, CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio).
+Themes for the Syncfusion® component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/angular/documentation/appearance/overview) documentation.
-The `Material3` theme is added to your `styles.css` when you run `ng add` (this happens automatically by default).
+Install the Material 3 theme package using the following npm command:
-To stylize only specific Syncfusion® components, import the necessary styles. For example, to style only the Badge component:
-
-```css
-@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-notifications/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/material3.css';
+```bash
+npm install @syncfusion/ej2-material3-theme
```
-Alternatively, based on the location of your CSS file, you can import the styles as shown below:
+Then add the following CSS reference to the **src/styles.css** file. This is the default global stylesheet registered under `styles` in `angular.json`:
```css
-@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
-@import 'node_modules/@syncfusion/ej2-notifications/styles/material3.css';
-@import 'node_modules/@syncfusion/ej2-angular-notifications/styles/material3.css';
+@import "@syncfusion/ej2-material3-theme/styles/material3.css";
```
-> Ensure that the import order aligns with the component's dependency sequence.
-
-For using SCSS styles, refer to [this guide](https://ej2.syncfusion.com/angular/documentation/common/how-to/sass).
-
## Add the Badge to the application
Use the following snippet in the `src/app/app.ts` file to import the Badge component.
diff --git a/ej2-angular/block-editor/accessibility.md b/ej2-angular/block-editor/accessibility.md
index a06e6ce5df0..d77eaf16ea2 100644
--- a/ej2-angular/block-editor/accessibility.md
+++ b/ej2-angular/block-editor/accessibility.md
@@ -16,15 +16,15 @@ The accessibility compliance for the Block Editor component is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) |
|
-| [Section 508 Support](../common/accessibility#accessibility-standards) |
|
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | 
|
-| [Color Contrast](../common/accessibility#color-contrast) | 
|
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
-| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
+| [WCAG 2.2 Support](https://ej2.syncfusion.com/angular/documentation/common/accessibility#accessibility-standards) | |
+| [Section 508 Support](https://ej2.syncfusion.com/angular/documentation/common/accessibility#accessibility-standards) | |
+| [Screen Reader Support](https://ej2.syncfusion.com/angular/documentation/common/accessibility#screen-reader-support) | |
+| [Right-To-Left Support](https://ej2.syncfusion.com/angular/documentation/common/accessibility#right-to-left-support) | |
+| [Color Contrast](https://ej2.syncfusion.com/angular/documentation/common/accessibility#color-contrast) | |
+| [Mobile Device Support](https://ej2.syncfusion.com/angular/documentation/common/accessibility#mobile-device-support) | |
+| [Keyboard Navigation Support](https://ej2.syncfusion.com/angular/documentation/common/accessibility#keyboard-navigation-support) | |
+| [Accessibility Checker Validation](https://ej2.syncfusion.com/angular/documentation/common/accessibility#ensuring-accessibility) | |
+| [Axe-core Accessibility Validation](https://ej2.syncfusion.com/angular/documentation/common/accessibility#ensuring-accessibility) | |
+
+
+
+ Loading....
+
+
+