Skip to content

SEO-206704-Image-Alt-Missing-Angular-Hotfix #416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: hotfix/hotfix-v30.2.4
Choose a base branch
from
Open

SEO-206704-Image-Alt-Missing-Angular-Hotfix #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f6bb18b
add image alt tag
NatAsha163 Aug 12, 2025
476a264
Update Selection.md
NatAsha163 Aug 13, 2025
c53ec68
add image alt tag
NatAsha163 Aug 13, 2025
a985a21
change the alt tag casting
NatAsha163 Aug 26, 2025
bc6f96d
change the alt tag casting
NatAsha163 Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions angular/Chart/Getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link

@ghost ghost Aug 26, 2025 •
edited by ghost
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check alt text casing in all places

Copy link
Author

@NatAsha163 NatAsha163 Aug 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed it


## Data Binding

Expand Down Expand Up @@ -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
Expand All @@ -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.
Expand All @@ -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

Expand All @@ -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

Expand All @@ -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)
![add chart title in Angular chart.](Getting-started-images/Getting-Started_img6.png)
26 changes: 13 additions & 13 deletions angular/Diagram/Interaction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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)



Expand All @@ -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

Expand All @@ -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

Expand All @@ -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

Expand All @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion angular/Diagram/Scroll-Settings.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
16 changes: 8 additions & 8 deletions angular/Grid/Data-Binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down
8 changes: 4 additions & 4 deletions angular/Grid/How-to.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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 foreign key field in parent and child table in Grid.](Hierarchy-Grid_images/Hierarchy-Grid_images2.png)

## Perform Grid Actions on External button click

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions angular/Grid/Paging.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Loading