diff --git a/angular/Button/Miscellaneous.md b/angular/Button/Miscellaneous.md index 2d8b2e9d..bba4f780 100644 --- a/angular/Button/Miscellaneous.md +++ b/angular/Button/Miscellaneous.md @@ -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 @@ -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 @@ -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) diff --git a/angular/Button/RTL-Support.md b/angular/Button/RTL-Support.md index 8ea08c29..96b45db4 100644 --- a/angular/Button/RTL-Support.md +++ b/angular/Button/RTL-Support.md @@ -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. @@ -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) diff --git a/angular/Button/Repeat-Button.md b/angular/Button/Repeat-Button.md index 020488d6..deb09700 100644 --- a/angular/Button/Repeat-Button.md +++ b/angular/Button/Repeat-Button.md @@ -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. @@ -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) diff --git a/angular/Chart/Legend.md b/angular/Chart/Legend.md index 31ac8711..0fc32ef3 100644 --- a/angular/Chart/Legend.md +++ b/angular/Chart/Legend.md @@ -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. @@ -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 @@ -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 @@ -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** @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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) @@ -276,4 +276,4 @@ You can collapse the specific series/point legend item displaying in the chart, {% endhighlight %} -![](Legend_images/Legend_img17.png) \ No newline at end of file +![Angular Chart collapsing legend item](Legend_images/Legend_img17.png) \ No newline at end of file diff --git a/angular/Gantt/Resource-Allocation-View.md b/angular/Gantt/Resource-Allocation-View.md index f774ff3d..1d0b68c7 100644 --- a/angular/Gantt/Resource-Allocation-View.md +++ b/angular/Gantt/Resource-Allocation-View.md @@ -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, @@ -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. @@ -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. @@ -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. @@ -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} @@ -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. @@ -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. @@ -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) \ No newline at end of file +![Angular Gantt resource over allocation](Resource-Allocation-View_images/ResourceView_18.png) \ No newline at end of file diff --git a/angular/TimePicker/Time-Format.md b/angular/TimePicker/Time-Format.md index a8c83cc8..214622f7 100644 --- a/angular/TimePicker/Time-Format.md +++ b/angular/TimePicker/Time-Format.md @@ -1,13 +1,13 @@ --- layout: post -title: Time-Format -description: time format +title: Time Picker in Angular TimePicker Control | Syncfusion +description: Learn here all about time format support in Syncfusion Angular TimePicker control, its elements, and more. platform: Angular control: TimePicker documentation: ug --- -# Time Format +# Time Format in Angular TimePicker **TimePicker** widget provides you an option to change the time format. @@ -40,5 +40,5 @@ export class DefaultComponent { Execute the above code to render the following output. -![](/Angular/TimePicker/Time-Format_images/Time-Format_img1.png) +![Angular TimePicker time format](Time-Format_images/Time-Format_img1.png)