Skip to content

SEO-2393 - Angular image alt text changes #151

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

Merged
merged 6 commits into from
Sep 6, 2022
Merged

SEO-2393 - Angular image alt text changes #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
28d297d
SEO-2475_Site_Audit_Issues
gowthamanthavasiyappan Aug 4, 2022
a1160e3
Merge pull request #142 from syncfusion-content/SEO-2245_Site_Audit_I…
Aishwarya-Ganesan Aug 8, 2022
99a5633
image alt text changes
Sharly-Atieno Aug 18, 2022
88b7713
image alt text changes
Sharly-Atieno Aug 18, 2022
e76c172
H removed
Sharly-Atieno Aug 22, 2022
f56b4b6
platform name changed
Sharly-Atieno Sep 6, 2022
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
10 changes: 5 additions & 5 deletions angular/Button/Miscellaneous.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Miscellaneous
description: miscellaneous
title: Miscellaneous in Angular Button Control | Syncfusion
description: Learn here about miscellaneous support in Syncfusion Essential Angular Button Control, its elements, and more.
platform: Angular
control: Button
documentation: ug
---

# Miscellaneous
# Miscellaneous in Angular Button

## Text

Expand Down Expand Up @@ -48,7 +48,7 @@ In the above code, the content of button “button” is replaced by the text va

Execute the above code to render the following output.

![](Miscellaneous_images/Miscellaneous_img1.png)
![Angular Button miscellaneous](Miscellaneous_images/Miscellaneous_img1.png)

## Show Rounded Corner

Expand Down Expand Up @@ -87,7 +87,7 @@ In the **HTML** page, add the following button elements to configure **Button**

Execute the above code to render the following output.

![](Miscellaneous_images/Miscellaneous_img2.png)
![Angular Button show rounded corner](Miscellaneous_images/Miscellaneous_img2.png)



8 changes: 4 additions & 4 deletions angular/Button/RTL-Support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: RTL-Support
description: rtl support
title: RTL Support in Angular Button Control | Syncfusion
description: Learn here about RTL Support in Syncfusion Essential Angular Button Control, its elements, and more.
platform: Angular
control: Button
documentation: ug
---

# RTL Support
# RTL Support in Angular Button

In some cases you can use right to left alignment. Here, RTL support is provided using **enableRTL** property. In RTL mode when you have more than one content (image/text, image/image) in button, then these content are aligned in right to left format. For example, when text is in left and image is in right position, after applying right to left alignment these position are interchanged.

Expand Down Expand Up @@ -46,5 +46,5 @@ In above mentioned code example prefixIcon property is used and the icon that is

Execute the above code to render the following output.

![](RTL-Support_images/RTL-Support_img1.png)
![Angular Button RTL Support](RTL-Support_images/RTL-Support_img1.png)

8 changes: 4 additions & 4 deletions angular/Button/Repeat-Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Repeat-Button
description: repeat button
title: Repeat Button in Angular Button Control | Syncfusion
description: Learn here about Repeat Button support in Syncfusion Essential Angular Button Control, its elements, and more.
platform: Angular
control: Button
documentation: ug
---

# Repeat Button
# Repeat Button in Angular Button

When you press button continuously, click event is raised at each specific time interval. This type of button is called **Repeat Button**. This functionality repeatedly raises the click event of button in both button click and from button in pressed state to the released state. **timeInterval** property is used to specify the time Interval for triggering click event, when the button is in pressed state. **repeatButton** property is used to set the button in repeat mode.

Expand Down Expand Up @@ -58,5 +58,5 @@ export class DefaultComponent {

Execute the above code to render the following output.

![](Repeat-Button_images/Repeat-Button_img1.png)
![Angular Button repeat button](Repeat-Button_images/Repeat-Button_img1.png)

40 changes: 20 additions & 20 deletions angular/Chart/Legend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Chart legend
description: How to cutomize the legend in Essential Angular Chart.
title: Legend in Angular Chart Control | Syncfusion
description: Learn here all about Legend support in Syncfusion Essential Angular Chart control, its elements, and more
platform: Angular
control: Chart
documentation: ug
---

# Legend
# Legend in Angular Chart

The legend contains the list of chart series and Trendlines that appear in a chart.

Expand All @@ -22,7 +22,7 @@ By default, the legend is enabled in the chart. You can enable or disable it by

{% endhighlight %}

![](Legend_images/Legend_img1.png)
![Angular Chart legend visibility](Legend_images/Legend_img1.png)

## Legend title

Expand All @@ -35,7 +35,7 @@ To add the title to the legend, you have to specify the `legend.title.text` opti

{% endhighlight %}

![](Legend_images/Legend_img2.png)
![Angular Chart legend title](Legend_images/Legend_img2.png)


## Position and Align the Legend
Expand All @@ -49,7 +49,7 @@ By using the `position` option, you can position the legend at *left*, *right*,

{% endhighlight %}

![](Legend_images/Legend_img3.png)
![Angular Chart position and align the legend](Legend_images/Legend_img3.png)

**Legend Alignment**

Expand All @@ -62,7 +62,7 @@ You can align the legend to the *center*, *far* or *near* based on its position

{% endhighlight %}

![](Legend_images/Legend_img4.png)
![Angular Chart legend alignment](Legend_images/Legend_img4.png)


## Arrange legend items in the rows and columns
Expand All @@ -85,7 +85,7 @@ You can arrange the legend items horizontally and vertically by using the `rowCo

{% endhighlight %}

![](Legend_images/Legend_img5.png)
![Angular Chart arrange legend items in the rows and column](Legend_images/Legend_img5.png)


## Customization
Expand All @@ -101,7 +101,7 @@ To change the legend icon shape, you have to specify the shape in the `shape` pr

{% endhighlight %}

![](Legend_images/Legend_img6.png)
![Angular Chart customization](Legend_images/Legend_img6.png)


### Legend items size and border
Expand All @@ -117,7 +117,7 @@ You can change the size of the legend items by using the `itemStyle.width` and `

{% endhighlight %}

![](Legend_images/Legend_img7.png)
![Angular Chart legend shape](Legend_images/Legend_img7.png)

### Legend size

Expand All @@ -130,7 +130,7 @@ By default, legend takes 20% of the **height** horizontally when it was placed o

{% endhighlight %}

![](Legend_images/Legend_img8.png)
![Angular Chart legend size](Legend_images/Legend_img8.png)


### Legend Item Padding
Expand All @@ -144,7 +144,7 @@ You can control the spacing between the legend items by using the `itemPadding`

{% endhighlight %}

![](Legend_images/Legend_img9.png)
![Angular Chart legend item padding](Legend_images/Legend_img9.png)

### Legend border

Expand All @@ -157,7 +157,7 @@ You can customize the legend border by using the `border` option in the legend.

{% endhighlight %}

![](Legend_images/Legend_img10.png)
![Angular Chart legend border](Legend_images/Legend_img10.png)

### Scrollbar for legend

Expand All @@ -171,7 +171,7 @@ You can enable or disable the legend scrollbar by using the `enableScrollbar` op

{% endhighlight %}

![](Legend_images/Legend_img11.png)
![Angular Chart scrollbar for legend](Legend_images/Legend_img11.png)

### Customize the legend text

Expand All @@ -192,7 +192,7 @@ this.titleFont= { fontFamily: 'Segoe UI', fontStyle: 'Italic',

{% endhighlight %}

![](Legend_images/Legend_img12.png)
![Angular Chart customize the legend text](Legend_images/Legend_img12.png)

### LegendItems Text Overflow

Expand All @@ -207,20 +207,20 @@ You can trim the legend item text when its width exceeds the `legend.textWidth`,

{% endhighlight %}

![](Legend_images/Legend_img13.png)
![Angular Chart legend items text overflow](Legend_images/Legend_img13.png)


**Wrap**

By specifying `textOverflow` as **"wrap"**, you can wrap the legend text by word.

![](Legend_images/Legend_img14.png)
![Angular Chart wrap](Legend_images/Legend_img14.png)

**WrapAndTrim**

You can wrap and trim the legend text by specifying `textOverflow` as **"wrapAndTrim"**. The original text will be displayed on mouse hover.

![](Legend_images/Legend_img15.png)
![Angular Chart wrap and trim](Legend_images/Legend_img15.png)


## Handle the legend item clicked
Expand Down Expand Up @@ -253,7 +253,7 @@ You can select a specific series or point while clicking on the corresponding le

{% endhighlight %}

![](Legend_images/Legend_img16.png)
![Angular Chart series selection on legend item click](Legend_images/Legend_img16.png)



Expand All @@ -276,4 +276,4 @@ You can collapse the specific series/point legend item displaying in the chart,

{% endhighlight %}

![](Legend_images/Legend_img17.png)
![Angular Chart collapsing legend item](Legend_images/Legend_img17.png)
46 changes: 23 additions & 23 deletions angular/Gantt/Resource-Allocation-View.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: Resource Allocation View
description: resource allocation view
title: Resource Allocation view in Angular Gantt Control | Syncfusion
description: Learn here all about resource allocation view support in Syncfusion Angular TimePicker control, its elements, and more.
platform: Angular
control: Gantt
documentation: ug
api: /api/js/ejgantt
---

# Resource Allocation View
# Resource Allocation View in Angular Gantt
Resource allocation view is used to visualize the resource usage in a project. Resources are displayed in separate rows and all the tasks assigned to a specific resource will be displayed in the chart side. In this view, a user can able to easily identify the overallocation of resources in a project.

![](Resource-Allocation-View_images/ResourceView_1.png)
![Angular Gantt resource allocation](Resource-Allocation-View_images/ResourceView_1.png)

## Data Binding
User can bind two types of data structure to Gantt in resource allocation view,
Expand Down Expand Up @@ -98,7 +98,7 @@ export class ResourceComponent {

{% endtabs %}

![](Resource-Allocation-View_images/ResourceView_2.png)
![Angular Gantt bind flat data](Resource-Allocation-View_images/ResourceView_2.png)

## Grouping
The resources and the tasks assigned to those resources can be grouped into categories. The property `groupCollection` is used to define the groups to be displayed in the project. The properties `groupIdMapping` and `groupNameMapping` are used to map the group details.
Expand Down Expand Up @@ -152,30 +152,30 @@ export class ResourceComponent {

The below screen shot depicts a resource view in a project with 3 groups.

![](Resource-Allocation-View_images/ResourceView_3.png)
![Angular Gantt grouping](Resource-Allocation-View_images/ResourceView_3.png)

## CRUD data operations

### Adding a task
It is possible to add a task dynamically either by using toolbar insert icon or by context menu add option. The below screen shot shows the toolbar add and context menu add options.

![](Resource-Allocation-View_images/ResourceView_4.png)
![Angular Gantt CRUD data operation](Resource-Allocation-View_images/ResourceView_4.png)

![](Resource-Allocation-View_images/ResourceView_5.png)
![Angular Gantt adding task](Resource-Allocation-View_images/ResourceView_5.png)

When the insert option is clicked, the add dialog will be displayed prompting the user to provide the task details. After providing the task details, when user click the save button without providing the resource information or without assigning any resource to the task, the task will be added at the top by default.

![](Resource-Allocation-View_images/ResourceView_6.png)
![Angular Gantt insert option](Resource-Allocation-View_images/ResourceView_6.png)

![](Resource-Allocation-View_images/ResourceView_7.png)
![Angular Gantt add dialog](Resource-Allocation-View_images/ResourceView_7.png)

If the newly added task should be assigned to a specific resource, user can able to select the resource information in the resource tab of add dialog.

![](Resource-Allocation-View_images/ResourceView_8.png)
![Angular Gantt specific resources](Resource-Allocation-View_images/ResourceView_8.png)

The below screen shot depicts a new task being assigned to a resource `Anne Dodsworth`.

![](Resource-Allocation-View_images/ResourceView_9.png)
![Angular Gantt assign new task](Resource-Allocation-View_images/ResourceView_9.png)

N> It is not possible to add a resource to the project dynamically.
N> A task can be assigned to one or more resource while adding.
Expand All @@ -185,12 +185,12 @@ N> A task can be assigned to one or more resource while adding.
#### Editing a Task
A task can be edited either by using edit dialog or by mouse interactions. A user can edit a task using edit dialog by performing double click action on the taskbar, user can then edit the task information in the edit dialog.

![](Resource-Allocation-View_images/ResourceView_10.png)
![](Resource-Allocation-View_images/ResourceView_11.png)
![Angular Gantt editing](Resource-Allocation-View_images/ResourceView_10.png)
![Angular Gantt editing a task](Resource-Allocation-View_images/ResourceView_11.png)

A task’s schedule can be changed by left resizing, right resizing or dragging the task across the dates.

![](Resource-Allocation-View_images/ResourceView_12.png)
![Angular Gantt left resizing](Resource-Allocation-View_images/ResourceView_12.png)

#### Update task values dynamically
In resource allocation view also, we can update the task details dynamically on any action like external button click by using [`updateRecordByTaskId`](/api/angular/ejgantt#methods:updaterecordbytaskid "updateRecordByTaskId(data)") method. The below code example explains how to use this method in resource allocation view.
Expand Down Expand Up @@ -232,11 +232,11 @@ export class ResourceComponent {

The below screenshot shows the result of above code example.

![](Resource-Allocation-View_images/ResourceView_19.png)
![Angular Gantt update task value dynamically](Resource-Allocation-View_images/ResourceView_19.png)
Before update
{:.caption}

![](Resource-Allocation-View_images/ResourceView_20.png)
![Angular Gantt before update](Resource-Allocation-View_images/ResourceView_20.png)
After update
{:.caption}

Expand All @@ -245,16 +245,16 @@ After update
#### Deleting Task
User should select a task to be removed from the project, and then the task can be deleted using context menu delete button.

![](Resource-Allocation-View_images/ResourceView_13.png)
![Angular Gantt deleting](Resource-Allocation-View_images/ResourceView_13.png)

#### Deleting Resource
User can able to delete a resource and the tasks assigned to it using toolbar and context menu delete options. After selecting the resource row, when clicking the delete toolbar icon, the resource will be removed from the project and the tasks assigned to that resource will be listed in unassigned tasks’ list. The same will happen for context menu delete option.

![](Resource-Allocation-View_images/ResourceView_14.png)
![Angular Gantt deleting task](Resource-Allocation-View_images/ResourceView_14.png)

The below screen shot depicts the tasks of the removed resource added as unassigned tasks to the project.

![](Resource-Allocation-View_images/ResourceView_15.png)
![Angular Gantt deleting resources](Resource-Allocation-View_images/ResourceView_15.png)

## Unassigned Tasks and Resources
There may be some instances, where one or more resources are not yet included in the project plan. Therefore, those resources are left with no tasks assigned to them. Those resources are termed as `unassigned resource`. The right side of the resource row will be left blank with no tasks.
Expand Down Expand Up @@ -286,7 +286,7 @@ export class ResourceComponent {

In the below screen shot, the resource `Nancy Davolio` is the unassigned resource.

![](Resource-Allocation-View_images/ResourceView_16.png)
![Angular Gantt unassigned task and resources](Resource-Allocation-View_images/ResourceView_16.png)

There may be instances where some tasks are not yet assigned with resources. Those tasks that are not assigned to any resources are termed as unassigned tasks. Unassigned tasks are displayed at bottom, with resource name as `Unassigned Task`. Unassigned tasks can be assigned to any resources in the project.
The below code snippet shows a task with no resource assigned to it.
Expand Down Expand Up @@ -317,9 +317,9 @@ export class ResourceComponent {

In the below screen shot, there more instances of unassigned tasks.

![](Resource-Allocation-View_images/ResourceView_17.png)
![Angular Gantt instances of unassigned tasks](Resource-Allocation-View_images/ResourceView_17.png)

## Resource Overallocation
By default, a resource can work 8 hours a work day, but when a resource is forced to work more than 8 hours it is termed as overallocation. Or when a resource is assigned with two or more tasks which is occurring in a same date range, this state is termed as over allocation for a resource. The overlapped tasks are highlighted like in the below screen shot. The overlapped tasks will be displayed one below the other with an overlapped highlighted region.

![](Resource-Allocation-View_images/ResourceView_18.png)
![Angular Gantt resource over allocation](Resource-Allocation-View_images/ResourceView_18.png)
Loading