diff --git a/angular/Accordion/Appearance-and-Styling.md b/angular/Accordion/Appearance-and-Styling.md index b7b1b5bb..39e69c90 100644 --- a/angular/Accordion/Appearance-and-Styling.md +++ b/angular/Accordion/Appearance-and-Styling.md @@ -1,13 +1,13 @@ --- layout: post -title: Appearance-and-Styling -description: appearance and styling +title: Appearance and Styling in Angular Accordion Control | Syncfusion +description: Learn here about appearance and styling in Syncfusion Essential Angular Accordion Control, its elements, and more. platform: Angular control: Accordion documentation: ug --- -# Appearance and Styling +# Appearance and Styling in Angular Accordion ## Adjusting Accordion size @@ -67,7 +67,7 @@ export class AccordionComponent { Output for Accordion control when panel height is set to auto so that the maximum content height and Fill for minimum content height in all the panels is as follows. -![](Appearance-and-Styling_images/Appearance-and-Styling_img1.png) +![Angular Accordion Rounded corner](Appearance-and-Styling_images/Appearance-and-Styling_img1.png) ## Rounded corner @@ -105,7 +105,7 @@ The following steps explains you in enabling the **showRoundedCorner** property Output for accordion widget when “showRoundedCorner” is set to “true” is as follows. -![](Appearance-and-Styling_images/Appearance-and-Styling_img2.png) +![Angular Accordion Customize Accordion icon](Appearance-and-Styling_images/Appearance-and-Styling_img2.png) ## Customize Accordion icon @@ -161,7 +161,7 @@ export class AccordionComponent { Output for Accordion widget with customized icons is as follows. -![](Appearance-and-Styling_images/Appearance-and-Styling_img3.png) +![Angular Accordion Animations](Appearance-and-Styling_images/Appearance-and-Styling_img3.png) ## Animations @@ -306,4 +306,4 @@ Define CSS class for customizing the Accordion. Output for Accordion with customized CSS property to hide the Accordion icon and format its content is as follows. -![](Appearance-and-Styling_images/Appearance-and-Styling_img4.png) \ No newline at end of file +![Angular Accordion appearance](Appearance-and-Styling_images/Appearance-and-Styling_img4.png) \ No newline at end of file diff --git a/angular/Gantt/Getting-Started.md b/angular/Gantt/Getting-Started.md index d1a89022..d8c7fdb9 100644 --- a/angular/Gantt/Getting-Started.md +++ b/angular/Gantt/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting-Started -description: getting started +title: Getting Started with Angular Gantt Control | Syncfusion +description: Learn here about getting started with Syncfusion Essential Angular Gantt Control, its elements, and more. platform: Angular control: Gantt documentation: ug @@ -131,7 +131,7 @@ export class AppModule { } A Gantt Control is created as shown in the following screen shot. -![](Getting-Started_images/Getting-Started_img5.png) +![Angular Gantt Enable Toolbar](Getting-Started_images/Getting-Started_img5.png) ## Enable Toolbar @@ -185,7 +185,7 @@ export class DefaultComponent { The following screen shot displays a Tool bar in Gantt chart control: -![](Getting-Started_images/Getting-Started_img6.png) +![Angular Gantt Enable Sorting](Getting-Started_images/Getting-Started_img6.png) N> Add, edit, delete, indent and outdent options are enabled when enabling the allowEditing, allowAdding, allowDelete, allowIndent and allowOutdent properties in the edit Options. @@ -260,7 +260,7 @@ export class DefaultComponent { The following screen shot displays a Gantt chart control with Enable Editing options. -![](Getting-Started_images/Getting-Started_img7.png) +![Angular Gantt Enable Context Menu](Getting-Started_images/Getting-Started_img7.png) N> Both cellEditing and normal editing operations are performed through double-click or single click action that can be defined by editSettings.beginEditAction property. @@ -278,7 +278,7 @@ You can enable the context menu in Gantt, by setting the [`enableContextMenu`](h The following screen shot displays Gantt chart in which Context menu option is enabled: -![](Getting-Started_images/Getting-Started_img8.png) +![Angular Gantt Enable Column Menu](Getting-Started_images/Getting-Started_img8.png) ## Enable Column Menu @@ -294,7 +294,7 @@ You can enable the column menu in Gantt, by setting the [`showColumnChooser`](ht The following screen shot displays Gantt chart in which column chooser option is enabled: -![](Getting-Started_images/Getting-Started_img11.png) +![Angular Gantt Provide tasks relationship](Getting-Started_images/Getting-Started_img11.png) ## Provide tasks relationship @@ -319,7 +319,7 @@ You can show the relationship in tasks, by using the [`predecessorMapping`](http The following screenshot displays the relationship between tasks. -![](Getting-Started_images/Getting-Started_img9.png) +![Angular Gantt Provide Resources](Getting-Started_images/Getting-Started_img9.png) ## Provide Resources @@ -371,7 +371,7 @@ export class DefaultComponent { The following screenshot displays resource allocation for tasks in Gantt chart. -![](Getting-Started_images/Getting-Started_img10.png) +![Angular Gantt Highlight Weekend](Getting-Started_images/Getting-Started_img10.png) By following these steps, you have learned how to provide data source to Gantt chart, how to configure Gantt to set task relationships, assign resources for each task, and add toolbar with necessary buttons. @@ -391,7 +391,7 @@ In Gantt, you can on or off weekends highlighting by setting the [`highlightWeek The following screen shot displays Gantt chart in which highlight weekends is disabled: -![](Getting-Started_images/Getting-Started_img12.png) +![Angular Gantt Running the application](Getting-Started_images/Getting-Started_img12.png) ## Running the application @@ -401,4 +401,4 @@ The following screen shot displays Gantt chart in which highlight weekends is di npm start {% endhighlight %} -* Browse to [http://localhost:3000](http://localhost:3000) to see the application. And navigate to Gantt 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. +* Browse to http://localhost:3000 to see the application. And navigate to Gantt 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.