From f6bb18b90a1a2b6def275a6c5a06d64e27f5947d Mon Sep 17 00:00:00 2001
From: Asha Bhaskaran <asha.bhaskaran@syncfusion.com>
Date: Tue, 12 Aug 2025 17:38:55 +0530
Subject: [PATCH 1/5] add image alt tag

---
 angular/Chart/Getting-started.md   | 12 ++++++------
 angular/Diagram/Interaction.md     | 10 +++++-----
 angular/Diagram/Scroll-Settings.md |  2 +-
 angular/Grid/Data-Binding.md       | 16 ++++++++--------
 angular/Grid/How-to.md             |  8 ++++----
 angular/Grid/Paging.md             |  8 ++++----
 angular/Grid/Row.md                | 20 ++++++++++----------
 7 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/angular/Chart/Getting-started.md b/angular/Chart/Getting-started.md
index 765482a6..9d3f5157 100644
--- a/angular/Chart/Getting-started.md
+++ b/angular/Chart/Getting-started.md
@@ -214,7 +214,7 @@ npm start
 
 * Browse to [http://localhost:3000](http://localhost:3000) to see the application. And navigate to chart tab. The component is rendered as like the below screenshot. You can make changes in the code found under src folder and the browser should auto-refresh itself while you save files. 
 
-![](Getting-started-images/Getting-Started_img1.png)
+![running the application in Angular Chart.](Getting-started-images/Getting-Started_img1.png)
 
 ## Data Binding
 
@@ -278,7 +278,7 @@ export class DataService{
 }
 {% endhighlight %}
 
-![](Getting-started-images/Getting-Started_img2.png)
+![data binding in Angular Chart.](Getting-started-images/Getting-Started_img2.png)
 
 
 ## Add Data Labels
@@ -300,7 +300,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![](Getting-started-images/Getting-Started_img3.png)
+![add data labels in Angular Chart.](Getting-started-images/Getting-Started_img3.png)
 
 
 There are situations where the default label content is not sufficient to the user. In this case, you can use the [`template`](../api/ejchart#members:series-marker-datalabel-template) option to format the label content with some additional information.
@@ -323,7 +323,7 @@ The above HTML template is used as a template for each data label. Here, "point.
 
 The following code example shows how to set the id of the above template to [`template`](../api/ejchart#members:series-marker-datalabel-template) option,
 
-![](Getting-started-images/Getting-Started_img4.png)
+![how to set the id of the above template to template option.](Getting-started-images/Getting-Started_img4.png)
 
 ## Enable Tooltip
 
@@ -345,7 +345,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![](Getting-started-images/Getting-Started_img5.png)
+![enable tooltip in Angular Chart.](Getting-started-images/Getting-Started_img5.png)
 
 ## Add Chart Title
 
@@ -358,4 +358,4 @@ You need to add a title to the chart to provide quick information to the user ab
 
 {% endhighlight %}
 
-![](Getting-started-images/Getting-Started_img6.png)
\ No newline at end of file
+![add chart title in Angular Chart.](Getting-started-images/Getting-Started_img6.png)
\ No newline at end of file
diff --git a/angular/Diagram/Interaction.md b/angular/Diagram/Interaction.md
index 2770a814..8026671b 100644
--- a/angular/Diagram/Interaction.md
+++ b/angular/Diagram/Interaction.md
@@ -17,7 +17,7 @@ Selector provides a visual representation of selected elements. It behaves like
 
 An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented.
 
-![](/angular/Diagram/Interaction_images/Interaction_img1.png)
+![single selection in Diagram Interaction.](/angular/Diagram/Interaction_images/Interaction_img1.png)
 
 ### Selecting a group
 
@@ -37,7 +37,7 @@ Multiple elements can be selected with the following ways.
 
 Multiple selected elements are visually represented as shown.
 
-![](/angular/Diagram/Interaction_images/Interaction_img2.png)
+![multiple selected elements are visually represented as shown.](/angular/Diagram/Interaction_images/Interaction_img2.png)
 
 ### Select/Unselect elements programmatically
 
@@ -90,7 +90,7 @@ N> SelectedItems’s children is a read-only property. You cannot change the chi
 * An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move every selected element.
 * While dragging, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to [Snapping](/angular/Diagram/Gridlines#snapping "Snapping").
 
-![](/angular/Diagram/Interaction_images/Interaction_img3.png)
+![an object can be dragged by clicking and dragging it.](/angular/Diagram/Interaction_images/Interaction_img3.png)
 
 ## Working with multiple diagrams
 
@@ -144,9 +144,9 @@ The following code illustrates how to drag nodes over multiple diagrams.
 
 The following screen short illustrates how the nodes are dragged from one diagram to another.
  
-![](/angular/Diagram/Interaction_images/Interaction_img12.png)
+![illustrates how the nodes are dragged from one diagram to another.](/angular/Diagram/Interaction_images/Interaction_img12.png)
 
-![](/angular/Diagram/Interaction_images/Interaction_img13.png)
+![illustrates how the nodes are dragged from one diagram to another in Diagram Interaction.](/angular/Diagram/Interaction_images/Interaction_img13.png)
  
 
 
diff --git a/angular/Diagram/Scroll-Settings.md b/angular/Diagram/Scroll-Settings.md
index a35ca584..46dba013 100644
--- a/angular/Diagram/Scroll-Settings.md
+++ b/angular/Diagram/Scroll-Settings.md
@@ -56,7 +56,7 @@ export class scrollSettingsComponent {
 
 In the example given below, the vertical scroll bar is scrolled down by 50px and horizontal scroll bar is scrolled to right by 100px. 
 
-![](/angular/Diagram/Scroll-Settings_images/Scroll-Settings_img1.png)
+![define scroll status in Diagram.](/angular/Diagram/Scroll-Settings_images/Scroll-Settings_img1.png)
 
 ## AutoScroll 
 
diff --git a/angular/Grid/Data-Binding.md b/angular/Grid/Data-Binding.md
index 2c8906e9..e1d71ff8 100644
--- a/angular/Grid/Data-Binding.md
+++ b/angular/Grid/Data-Binding.md
@@ -59,7 +59,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img1.png)
+![to bind local data to the Grid.](dataBinding_images/dataBinding_img1.png)
 
 
 N> 1. There is no in-built support to bind the XML data to the grid. But you can achieve this requirement with the help of [`custom adaptor`]concept. 
@@ -116,7 +116,7 @@ The following code example describes the above behavior.
 	
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img2.png)
+![OData is a standardized protocol for creating and consuming data.](dataBinding_images/dataBinding_img2.png)
 
 N> By default, if no adaptor is specified for ej.DataManager and only the url link is mentioned it will consider as ODataService. 
 
@@ -242,7 +242,7 @@ namespace EJGrid.Controllers
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img3.png)
+![webapi service data to Grid.](dataBinding_images/dataBinding_img3.png)
 
 
 ### Load At Once
@@ -294,7 +294,7 @@ Please refer to this for further reference on `offline` property
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img5.png)
+![load at once in Grid](dataBinding_images/dataBinding_img5.png)
 
 
 ### Data Caching
@@ -347,7 +347,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img6.png)
+![date caching in Grid Data Binding.](dataBinding_images/dataBinding_img6.png)
 
 
 ### Custom request parameters and HTTP Header
@@ -403,7 +403,7 @@ The following code example describes the above behavior.
 
 The custom parameter will be passed along with the data request of the grid as follows.
 
-![](dataBinding_images/dataBinding_img7.png)
+![adding request parameters in Grid.](dataBinding_images/dataBinding_img7.png)
 
 
 #### Handling HTTP Errors
@@ -486,7 +486,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img8.png)
+![handling http errors in Grid.](dataBinding_images/dataBinding_img8.png)
 
 
 ## HTML Table 
@@ -590,7 +590,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img9.png)
+![html table in Grid.](dataBinding_images/dataBinding_img9.png)
 
 
 I> The HTML Table element is the only valid element when using HTML Table binding. Using other elements will throws an exception.
diff --git a/angular/Grid/How-to.md b/angular/Grid/How-to.md
index 8944c976..d91a505d 100644
--- a/angular/Grid/How-to.md
+++ b/angular/Grid/How-to.md
@@ -191,7 +191,7 @@ import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
 
 
 The following output is displayed as a result of the above code example.
-![](externalsearch_images/externalsearch_img1.png)
+![external search in Grid.](externalsearch_images/externalsearch_img1.png)
 
 ## Hierarchy Grid with different foreignKeyField in parent and child table
 
@@ -252,7 +252,7 @@ export class GridComponent {
 {% endhighlight %}
 
 The following output is displayed as a result of the above code example.
-![](Hierarchy-Grid_images/Hierarchy-Grid_images2.png)
+![Hierarchy Grid with different foreignKeyField in parent and child table in Grid.](Hierarchy-Grid_images/Hierarchy-Grid_images2.png)
 
 ## Perform Grid Actions on External button click
 
@@ -409,7 +409,7 @@ import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
 
 {% endtabs %}
 The following output is displayed as a result of the above code example.
-![](externalsearch_images/Actionswithexternalbutton_img1.png)
+![sorting in Grid.](externalsearch_images/Actionswithexternalbutton_img1.png)
 
 
 ## Display other Syncfusion controls in Grid columns
@@ -454,7 +454,7 @@ import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
 {% endhighlight %}
 
 The following output is displayed as a result of the above code example.
-![](Display-Other-controls/Display_Other_controls_img1.png)
+![display other Syncfusion controls in Grid columns.](Display-Other-controls/Display_Other_controls_img1.png)
 
 
 ## Getting Datasource of Grid in Sorted Order
diff --git a/angular/Grid/Paging.md b/angular/Grid/Paging.md
index 9629821f..e6e0a61e 100644
--- a/angular/Grid/Paging.md
+++ b/angular/Grid/Paging.md
@@ -43,7 +43,7 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](paging_images/paging_img1.png)
+![paging in Grid](paging_images/paging_img1.png)
 
 
 ## Pager with query string
@@ -84,7 +84,7 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](paging_images/paging_img2.png)
+![pager with query string in Grid](paging_images/paging_img2.png)
 
 
 ## Pager template
@@ -155,7 +155,7 @@ Place the template inside index.html file
 
 The following output is displayed as a result of the above code example.
 
-![](paging_images/paging_img3.png)
+![pager template in Angular Grid.](paging_images/paging_img3.png)
 
 
 ## Pager with pageSize drop down
@@ -196,4 +196,4 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](paging_images/paging_img4.png)
+![pager with pagesize drop down in Angular Grid.](paging_images/paging_img4.png)
diff --git a/angular/Grid/Row.md b/angular/Grid/Row.md
index 75ed6e1c..2c16754b 100644
--- a/angular/Grid/Row.md
+++ b/angular/Grid/Row.md
@@ -51,7 +51,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](Row_images/Row_img1.png)
+![row in Angular Grid.](Row_images/Row_img1.png)
 
 
 ## Details Template
@@ -156,7 +156,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Row_images/Row_img12.PNG)
+![details template in Angular Grid.](Row_images/Row_img12.PNG)
 
 
 ## Row Template
@@ -249,7 +249,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](Row_images/Row_img11.png)
+![row template in Angular Grid.](Row_images/Row_img11.png)
 
 ## Alternate row styling
 
@@ -292,7 +292,7 @@ By default its value is `true`, so the following code example describes the how
 
 The following output is displayed as a result of the above code example.
 
-![](Row_images/Row_img4.png)
+![alternate row styling in Angular Grid.](Row_images/Row_img4.png)
 
 
 ## Drag-and-Drop
@@ -341,12 +341,12 @@ The following code example describes the above behavior.
 
 The following output is displayed before reordering rows. 
 
-![](Row_images/Row_img5.png)
+![displayed before reordering rows in Angular Grid.](Row_images/Row_img5.png)
 {:Before Drop}
 
 The following output is displayed after reordering rows.
 
-![](Row_images/Row_img6.png)
+![displayed after reordering rows in  Angular Grid.](Row_images/Row_img6.png)
 {:After Drop}
 
 
@@ -402,12 +402,12 @@ The following code example describes the above behavior.
 
 The following output is displayed before dropping Grid rows.
 
-![](Row_images/Row_img7.png)
+![displayed before dropping Grid rows in Angular Grid.](Row_images/Row_img7.png)
 {:Before Drop}
 
 The following output is displayed after dropping Grid rows.
 
-![](Row_images/Row_img8.png)
+![displayed after dropping Grid rows in Angular Grid.](Row_images/Row_img8.png)
 {:After Drop}
 
 
@@ -489,12 +489,12 @@ The following code example describes the above behavior.
 
 The following output is displayed before dropping the rows on Form.
 
-![](Row_images/Row_img9.png)
+![displayed before dropping the rows on Form in Angular Grid.](Row_images/Row_img9.png)
 {:Before Drop}
 
 The following output is displayed after dropping the rows on Form.
 
-![](Row_images/Row_img10.png)
+![displayed after dropping the rows on Form in Angular Grid.](Row_images/Row_img10.png)
 {:After Drop}
 
 N>   The default behavior of drag and drop between Grid or any other controls is as cut and paste. For copy and paste behavior specify the drag behavior in [`dragBehavior`](https://help.syncfusion.com/api/angular/ejgrid#members:rowdropsettings-dragbehavior "dragBehavior") property of [`rowDropSettings`](https://help.syncfusion.com/api/angular/ejgrid#members:rowdropsettings "rowDropSettings")  as ej.Grid.DragBehavior.Copy.

From 476a2649c6cd6a0b9b9fc44cec9abb2a9fea9de7 Mon Sep 17 00:00:00 2001
From: Asha Bhaskaran <asha.bhaskaran@syncfusion.com>
Date: Wed, 13 Aug 2025 09:25:36 +0530
Subject: [PATCH 2/5] Update Selection.md

---
 angular/Grid/Selection.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/angular/Grid/Selection.md b/angular/Grid/Selection.md
index b96d3bbc..a284c495 100644
--- a/angular/Grid/Selection.md
+++ b/angular/Grid/Selection.md
@@ -69,7 +69,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img1.png)
+![row selection in Angular Grid.](selection_images/selection_img1.png)
 
 
 ## Multiple Row Selection using Checkbox Column
@@ -116,7 +116,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img6.png)
+![multiple row selection using checkbox column in Angular Grid.](selection_images/selection_img6.png)
 
 
 ## Cell Selection
@@ -161,7 +161,7 @@ Cell selection is enabled by setting [`selectionMode`](https://help.syncfusion.c
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img2.png)
+![cell selection in Angular Grid.](selection_images/selection_img2.png)
 
 
 ### Cell Selection Mode
@@ -213,7 +213,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img3.png)
+![cell selection mode in Angular Grid.](selection_images/selection_img3.png)
 
 
 N> Continuous selection is the default cell selection mode in grid when [`selectionMode`](https://help.syncfusion.com/api/angular/ejgrid#members:selectionsettings-selectionmode) is "cell"
@@ -262,7 +262,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img4.png)
+![column selection in Angular Grid.](selection_images/selection_img4.png)
 
 
 ## Touch options
@@ -307,7 +307,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](selection_images/selection_img5.png)
+![touch options in Angular Grid.](selection_images/selection_img5.png)
 
 
 ## Toggle Selection
@@ -405,4 +405,4 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](selection_images/Selection_img7.png)
\ No newline at end of file
+![drag selection in Angular Grid.](selection_images/Selection_img7.png)
\ No newline at end of file

From c53ec68265a20daf743ab9ae4de7aff9ce670cfa Mon Sep 17 00:00:00 2001
From: Asha Bhaskaran <asha.bhaskaran@syncfusion.com>
Date: Wed, 13 Aug 2025 09:48:15 +0530
Subject: [PATCH 3/5] add image alt tag

---
 angular/Menu/Context-Menu.md        |  2 +-
 angular/Menu/Getting-Started.md     | 10 +++++-----
 angular/Schedule/getting-started.md |  2 +-
 angular/Spreadsheet/Context-Menu.md |  8 ++++----
 angular/SunburstChart/Tooltip.md    |  4 ++--
 angular/TreeView/Tree-Node.md       |  2 +-
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/angular/Menu/Context-Menu.md b/angular/Menu/Context-Menu.md
index de5d2689..c003004b 100644
--- a/angular/Menu/Context-Menu.md
+++ b/angular/Menu/Context-Menu.md
@@ -80,7 +80,7 @@ Add the following code in menu.component.css file.
 
 The following screen shot displays the output of the above code.
 
-![](Context-Menu_images/Context-Menu_img1.png) 
+![context menu in Angular Menu](Context-Menu_images/Context-Menu_img1.png) 
 
 You can hide and show the context menu using the following methods.
 
diff --git a/angular/Menu/Getting-Started.md b/angular/Menu/Getting-Started.md
index 8c8fcdc1..268b0f68 100644
--- a/angular/Menu/Getting-Started.md
+++ b/angular/Menu/Getting-Started.md
@@ -13,7 +13,7 @@ keywords: ejmenu, js menu, menu
 This section explains briefly about how to create a **Menu** control in your application with **Angular**. The **Essential JavaScript** **Menu** supports displaying a **Menu** of list-out items. This **Menu** is based on ul-li hierarchy, where the sub-list items are rendered as the sub-menu items. The **Menu** control can also be rendered with local and remote data source.  From the following guidelines, you can learn how to customize the **Menu** control for a website. In this case, **Syncfusion's** website **Menu** is discussed. The following screenshot displays the appearance of **Menu**.
 
 
-![](Getting-Started_images/Getting-Started_img1.png) 
+![how to create a Menu control in Angular Menu.](Getting-Started_images/Getting-Started_img1.png) 
 
 ## Create a Menu
 
@@ -68,7 +68,7 @@ Adding element for **Menu** rendering.
 
 Output of the above steps.
 
-![](Getting-Started_images/Getting-Started_img2.png) 
+![create a menu in Angular Menu.](Getting-Started_images/Getting-Started_img2.png) 
 
 ## Configure parent Menu items
 
@@ -106,7 +106,7 @@ Every **Menu** has a list of **Menu** items with list of sub level **Menu** item
 
 The following screenshot displays output.
 
-![](Getting-Started_images/Getting-Started_img3.jpg) 
+![configure parent Menu items in Angular Menu](Getting-Started_images/Getting-Started_img3.jpg) 
 
 ## Initialize sub-level Menu items
 
@@ -158,7 +158,7 @@ The following code example describes how to initialize first level sub menu item
 
 Execute the above code example to render the following output.
 
-![](Getting-Started_images/Getting-Started_img4.png) 
+![initialize sub-level menu items in Angular Menu](Getting-Started_images/Getting-Started_img4.png) 
 
 ## Define multiple level Menu items
 
@@ -214,7 +214,7 @@ To initialize multiple levels sub menu items, use the following code example.
 
 The following screenshot is the output.
 
-![](Getting-Started_images/Getting-Started_img1.png) 
+![define multiple level menu items in Angular Menu.](Getting-Started_images/Getting-Started_img1.png) 
 
 By following the above mentioned steps, you can render the **Menu** control with multiple level sub items through online data source. You can simply customize the **Menu** widget in an efficient manner.
 
diff --git a/angular/Schedule/getting-started.md b/angular/Schedule/getting-started.md
index 9cb69703..085b5375 100644
--- a/angular/Schedule/getting-started.md
+++ b/angular/Schedule/getting-started.md
@@ -67,4 +67,4 @@ export class ScheduleComponent {
 {% endhighlight %}
 
 
-![](Getting-Started_images/Getting-Started_img1.png)
+![data-binding in Angular Schedule.](Getting-Started_images/Getting-Started_img1.png)
diff --git a/angular/Spreadsheet/Context-Menu.md b/angular/Spreadsheet/Context-Menu.md
index 39970451..5667e034 100644
--- a/angular/Spreadsheet/Context-Menu.md
+++ b/angular/Spreadsheet/Context-Menu.md
@@ -53,23 +53,23 @@ The following code example describes the above behavior.
 </ej-spreadsheet>
 {% endhighlight %}
 
-![](Context-Menu_images/context-menu_img1.png)
+![contextmenu at cell in Angular Spreadsheet.](Context-Menu_images/context-menu_img1.png)
 
 Contextmenu at Cell
 {:.caption}
 
 
-![](Context-Menu_images/context-menu_img2.png)
+![contextmenu at column header in Angular Spreadsheet.](Context-Menu_images/context-menu_img2.png)
 
 Contextmenu at Column Header
 {:.caption}
 
-![](Context-Menu_images/context-menu_img3.png)
+![contextmenu at row header in Angular Spreadsheet.](Context-Menu_images/context-menu_img3.png)
 
 Contextmenu at Row Header
 {:.caption}
 
-![](Context-Menu_images/context-menu_img4.png)
+![contextmenu at pager in Angular Spreadsheet.](Context-Menu_images/context-menu_img4.png)
 
 Contextmenu at Pager
 {:.caption}
diff --git a/angular/SunburstChart/Tooltip.md b/angular/SunburstChart/Tooltip.md
index a44ca474..04f50614 100644
--- a/angular/SunburstChart/Tooltip.md
+++ b/angular/SunburstChart/Tooltip.md
@@ -18,7 +18,7 @@ ToolTip allows you to display any information over a sunburst segment. It appear
 
 {% endhighlight %}
 
-![](Tooltip_images/Tooltip_img1.png)
+![tooltip in Angular Sunburstchart](Tooltip_images/Tooltip_img1.png)
 
 ## Tooltip Template   
 
@@ -45,7 +45,7 @@ HTML elements can be displayed in the tooltip by using the `tooltip.template` pr
 
 {% endhighlight %}
 
-![](Tooltip_images/Tooltip_img2.png)
+![tooltip template in Angular Sunburstchart.](Tooltip_images/Tooltip_img2.png)
 
 ## Customize the appearance of tooltip
 
diff --git a/angular/TreeView/Tree-Node.md b/angular/TreeView/Tree-Node.md
index 33c55301..1031898d 100644
--- a/angular/TreeView/Tree-Node.md
+++ b/angular/TreeView/Tree-Node.md
@@ -12,7 +12,7 @@ documentation: ug
 
 TreeView node is structured with expand/collapse arrow, checkbox, image and text as shown in below.
 
-![](Tree-Node_images/Tree-Node_img1.png)
+![tree node in Angular TreeView](Tree-Node_images/Tree-Node_img1.png)
 
 
 Also TreeView node object holds the following properties.

From a985a2115432cc01a6b3a4f7cf0d1c1983c060b4 Mon Sep 17 00:00:00 2001
From: Asha Bhaskaran <asha.bhaskaran@syncfusion.com>
Date: Tue, 26 Aug 2025 16:28:04 +0530
Subject: [PATCH 4/5] change the alt tag casting

---
 angular/Chart/Getting-started.md |  8 ++++----
 angular/Diagram/Interaction.md   | 20 ++++++++++----------
 angular/Grid/Data-Binding.md     |  2 +-
 angular/Grid/How-to.md           |  2 +-
 angular/Grid/Paging.md           |  4 ++--
 angular/Grid/Row.md              |  6 +++---
 6 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/angular/Chart/Getting-started.md b/angular/Chart/Getting-started.md
index 9d3f5157..c7ea68d2 100644
--- a/angular/Chart/Getting-started.md
+++ b/angular/Chart/Getting-started.md
@@ -278,7 +278,7 @@ export class DataService{
 }
 {% endhighlight %}
 
-![data binding in Angular Chart.](Getting-started-images/Getting-Started_img2.png)
+![data binding in Angular chart.](Getting-started-images/Getting-Started_img2.png)
 
 
 ## Add Data Labels
@@ -300,7 +300,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![add data labels in Angular Chart.](Getting-started-images/Getting-Started_img3.png)
+![add data labels in Angular chart.](Getting-started-images/Getting-Started_img3.png)
 
 
 There are situations where the default label content is not sufficient to the user. In this case, you can use the [`template`](../api/ejchart#members:series-marker-datalabel-template) option to format the label content with some additional information.
@@ -345,7 +345,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![enable tooltip in Angular Chart.](Getting-started-images/Getting-Started_img5.png)
+![enable tooltip in Angular chart.](Getting-started-images/Getting-Started_img5.png)
 
 ## Add Chart Title
 
@@ -358,4 +358,4 @@ You need to add a title to the chart to provide quick information to the user ab
 
 {% endhighlight %}
 
-![add chart title in Angular Chart.](Getting-started-images/Getting-Started_img6.png)
\ No newline at end of file
+![add chart title in Angular chart.](Getting-started-images/Getting-Started_img6.png)
\ No newline at end of file
diff --git a/angular/Diagram/Interaction.md b/angular/Diagram/Interaction.md
index 8026671b..2c22ac9e 100644
--- a/angular/Diagram/Interaction.md
+++ b/angular/Diagram/Interaction.md
@@ -17,7 +17,7 @@ Selector provides a visual representation of selected elements. It behaves like
 
 An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented.
 
-![single selection in Diagram Interaction.](/angular/Diagram/Interaction_images/Interaction_img1.png)
+![single selection in Diagram interaction.](/angular/Diagram/Interaction_images/Interaction_img1.png)
 
 ### Selecting a group
 
@@ -146,7 +146,7 @@ The following screen short illustrates how the nodes are dragged from one diagra
  
 ![illustrates how the nodes are dragged from one diagram to another.](/angular/Diagram/Interaction_images/Interaction_img12.png)
 
-![illustrates how the nodes are dragged from one diagram to another in Diagram Interaction.](/angular/Diagram/Interaction_images/Interaction_img13.png)
+![illustrates how the nodes are dragged from one diagram to another in Diagram interaction.](/angular/Diagram/Interaction_images/Interaction_img13.png)
  
 
 
@@ -156,7 +156,7 @@ The following screen short illustrates how the nodes are dragged from one diagra
 * When one corner of the selector is dragged, opposite corner is in a static position.
 * While resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to [Snapping](/angular/Diagram/Gridlines#snapping "Snapping").
 
-![](/angular/Diagram/Interaction_images/Interaction_img4.png)
+![resize in Diagram interaction.](/angular/Diagram/Interaction_images/Interaction_img4.png)
 
 ## Rotate
 
@@ -165,7 +165,7 @@ The following screen short illustrates how the nodes are dragged from one diagra
 * Pivot thumb (thumb at the middle of the node) appears while rotating the node to represent the static point.
 * For more information about pivot, refer to [Position](/angular/Diagram/Node#position "Position").
 
-![](/angular/Diagram/Interaction_images/Interaction_img5.png)
+![rotate in Diagram interaction.](/angular/Diagram/Interaction_images/Interaction_img5.png)
 
 ## Connection editing
 
@@ -175,7 +175,7 @@ The following screen short illustrates how the nodes are dragged from one diagra
 
 Source and target points of the selected connectors are represented with two handles. Clicking and dragging those handles help you to adjust the source and target points.
 
-![](/angular/Diagram/Interaction_images/Interaction_img6.png)
+![end point handles in Connection editing in interaction.](/angular/Diagram/Interaction_images/Interaction_img6.png)
 
 ### Straight segment editing
 
@@ -187,17 +187,17 @@ Source and target points of the selected connectors are represented with two han
 
 * Orthogonal thumbs allow to adjust the length of adjacent segments by clicking and dragging it.
 
-![](/angular/Diagram/Interaction_images/Interaction_img7.png)
+![straight segment editing in connection editing in interaction.](/angular/Diagram/Interaction_images/Interaction_img7.png)
 
 * When necessary, some segments are added or removed automatically, when dragging the segment. This is to maintain proper routing of orthogonality between segments.
 
-![](/angular/Diagram/Interaction_images/Interaction_img8.png)
+![added or removed automatically connection editing in interaction.](/angular/Diagram/Interaction_images/Interaction_img8.png)
 
 ### Bezier thumbs
 
 * Bezier segments are annotated with two thumbs to represent the control points. Control points of the curve can be configured by clicking and dragging the control thumbs.
 
-![](/angular/Diagram/Interaction_images/Interaction_img9.png)
+![bezier thumbs connection editing in interaction.](/angular/Diagram/Interaction_images/Interaction_img9.png)
 
 ## Drag and drop nodes over other elements
 
@@ -305,7 +305,7 @@ syncApp.controller('diagramCtrl', function ($scope) {
 
 {% endhighlight %}
 
-![](/angular/Diagram/Interaction_images/Interaction_img10.png)
+![user handles in interaction.](/angular/Diagram/Interaction_images/Interaction_img10.png)
 
 ### Appearance
 
@@ -341,7 +341,7 @@ syncApp.controller('diagramCtrl', function ($scope) {
 });
 {% endhighlight %}
 
-![](/angular/Diagram/Interaction_images/Interaction_img11.png)
+![appearance in interaction.](/angular/Diagram/Interaction_images/Interaction_img11.png)
 
 ## Zoom pan
 
diff --git a/angular/Grid/Data-Binding.md b/angular/Grid/Data-Binding.md
index e1d71ff8..7264a49a 100644
--- a/angular/Grid/Data-Binding.md
+++ b/angular/Grid/Data-Binding.md
@@ -347,7 +347,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![date caching in Grid Data Binding.](dataBinding_images/dataBinding_img6.png)
+![date caching in Grid data binding.](dataBinding_images/dataBinding_img6.png)
 
 
 ### Custom request parameters and HTTP Header
diff --git a/angular/Grid/How-to.md b/angular/Grid/How-to.md
index d91a505d..a7326b64 100644
--- a/angular/Grid/How-to.md
+++ b/angular/Grid/How-to.md
@@ -252,7 +252,7 @@ export class GridComponent {
 {% endhighlight %}
 
 The following output is displayed as a result of the above code example.
-![Hierarchy Grid with different foreignKeyField in parent and child table in Grid.](Hierarchy-Grid_images/Hierarchy-Grid_images2.png)
+![hierarchy grid with different foreign key field in parent and child table in Grid.](Hierarchy-Grid_images/Hierarchy-Grid_images2.png)
 
 ## Perform Grid Actions on External button click
 
diff --git a/angular/Grid/Paging.md b/angular/Grid/Paging.md
index e6e0a61e..afa2efe4 100644
--- a/angular/Grid/Paging.md
+++ b/angular/Grid/Paging.md
@@ -155,7 +155,7 @@ Place the template inside index.html file
 
 The following output is displayed as a result of the above code example.
 
-![pager template in Angular Grid.](paging_images/paging_img3.png)
+![pager template in Angular grid.](paging_images/paging_img3.png)
 
 
 ## Pager with pageSize drop down
@@ -196,4 +196,4 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![pager with pagesize drop down in Angular Grid.](paging_images/paging_img4.png)
+![pager with pagesize drop down in Angular grid.](paging_images/paging_img4.png)
diff --git a/angular/Grid/Row.md b/angular/Grid/Row.md
index 2c16754b..4e8328fd 100644
--- a/angular/Grid/Row.md
+++ b/angular/Grid/Row.md
@@ -234,7 +234,7 @@ The following code example describes the above behavior.
       selector: 'ej-app',
       templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
     })
-    export class AppComponent {
+    export class AppComponent { 
        ublic gridData: any;
     
     temp:any;
@@ -246,7 +246,7 @@ The following code example describes the above behavior.
         this.temp = "#rowtemplate";
      }
 {% endhighlight %}
-
+    }
 The following output is displayed as a result of the above code example.
 
 ![row template in Angular Grid.](Row_images/Row_img11.png)
@@ -346,7 +346,7 @@ The following output is displayed before reordering rows.
 
 The following output is displayed after reordering rows.
 
-![displayed after reordering rows in  Angular Grid.](Row_images/Row_img6.png)
+![displayed after reordering rows in Angular Grid.](Row_images/Row_img6.png)
 {:After Drop}
 
 

From bc6f96da0ad121173cbd864ea202f5f2a2bfe59a Mon Sep 17 00:00:00 2001
From: Asha Bhaskaran <asha.bhaskaran@syncfusion.com>
Date: Tue, 26 Aug 2025 16:32:22 +0530
Subject: [PATCH 5/5] change the alt tag casting

---
 angular/Menu/Getting-Started.md     | 6 +++---
 angular/Spreadsheet/Context-Menu.md | 8 ++++----
 angular/SunburstChart/Tooltip.md    | 2 +-
 angular/TreeView/Tree-Node.md       | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/angular/Menu/Getting-Started.md b/angular/Menu/Getting-Started.md
index 268b0f68..49dff89e 100644
--- a/angular/Menu/Getting-Started.md
+++ b/angular/Menu/Getting-Started.md
@@ -13,7 +13,7 @@ keywords: ejmenu, js menu, menu
 This section explains briefly about how to create a **Menu** control in your application with **Angular**. The **Essential JavaScript** **Menu** supports displaying a **Menu** of list-out items. This **Menu** is based on ul-li hierarchy, where the sub-list items are rendered as the sub-menu items. The **Menu** control can also be rendered with local and remote data source.  From the following guidelines, you can learn how to customize the **Menu** control for a website. In this case, **Syncfusion's** website **Menu** is discussed. The following screenshot displays the appearance of **Menu**.
 
 
-![how to create a Menu control in Angular Menu.](Getting-Started_images/Getting-Started_img1.png) 
+![how to create a menu control in Angular Menu.](Getting-Started_images/Getting-Started_img1.png) 
 
 ## Create a Menu
 
@@ -106,7 +106,7 @@ Every **Menu** has a list of **Menu** items with list of sub level **Menu** item
 
 The following screenshot displays output.
 
-![configure parent Menu items in Angular Menu](Getting-Started_images/Getting-Started_img3.jpg) 
+![configure parent menu items in Angular Menu.](Getting-Started_images/Getting-Started_img3.jpg) 
 
 ## Initialize sub-level Menu items
 
@@ -158,7 +158,7 @@ The following code example describes how to initialize first level sub menu item
 
 Execute the above code example to render the following output.
 
-![initialize sub-level menu items in Angular Menu](Getting-Started_images/Getting-Started_img4.png) 
+![initialize sub-level menu items in Angular Menu.](Getting-Started_images/Getting-Started_img4.png) 
 
 ## Define multiple level Menu items
 
diff --git a/angular/Spreadsheet/Context-Menu.md b/angular/Spreadsheet/Context-Menu.md
index 5667e034..cbfa53e1 100644
--- a/angular/Spreadsheet/Context-Menu.md
+++ b/angular/Spreadsheet/Context-Menu.md
@@ -53,23 +53,23 @@ The following code example describes the above behavior.
 </ej-spreadsheet>
 {% endhighlight %}
 
-![contextmenu at cell in Angular Spreadsheet.](Context-Menu_images/context-menu_img1.png)
+![context menu at cell in Angular Spreadsheet.](Context-Menu_images/context-menu_img1.png)
 
 Contextmenu at Cell
 {:.caption}
 
 
-![contextmenu at column header in Angular Spreadsheet.](Context-Menu_images/context-menu_img2.png)
+![context menu at column header in Angular Spreadsheet.](Context-Menu_images/context-menu_img2.png)
 
 Contextmenu at Column Header
 {:.caption}
 
-![contextmenu at row header in Angular Spreadsheet.](Context-Menu_images/context-menu_img3.png)
+![context menu at row header in Angular Spreadsheet.](Context-Menu_images/context-menu_img3.png)
 
 Contextmenu at Row Header
 {:.caption}
 
-![contextmenu at pager in Angular Spreadsheet.](Context-Menu_images/context-menu_img4.png)
+![context menu at pager in Angular Spreadsheet.](Context-Menu_images/context-menu_img4.png)
 
 Contextmenu at Pager
 {:.caption}
diff --git a/angular/SunburstChart/Tooltip.md b/angular/SunburstChart/Tooltip.md
index 04f50614..ff568ad3 100644
--- a/angular/SunburstChart/Tooltip.md
+++ b/angular/SunburstChart/Tooltip.md
@@ -18,7 +18,7 @@ ToolTip allows you to display any information over a sunburst segment. It appear
 
 {% endhighlight %}
 
-![tooltip in Angular Sunburstchart](Tooltip_images/Tooltip_img1.png)
+![tooltip in Angular Sunburstchart.](Tooltip_images/Tooltip_img1.png)
 
 ## Tooltip Template   
 
diff --git a/angular/TreeView/Tree-Node.md b/angular/TreeView/Tree-Node.md
index 1031898d..7b52430d 100644
--- a/angular/TreeView/Tree-Node.md
+++ b/angular/TreeView/Tree-Node.md
@@ -12,7 +12,7 @@ documentation: ug
 
 TreeView node is structured with expand/collapse arrow, checkbox, image and text as shown in below.
 
-![tree node in Angular TreeView](Tree-Node_images/Tree-Node_img1.png)
+![tree node in Angular TreeView.](Tree-Node_images/Tree-Node_img1.png)
 
 
 Also TreeView node object holds the following properties.