syncfusion-content · SyncfusionBuild · Apr 18, 2023 · Apr 17, 2023 · Apr 18, 2023
diff --git a/angular/Chart/Printing.md b/angular/Chart/Printing.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Printing option in Essential Angular Chart
-description: Learn how to print Chart 
+title: Printing option in Essential Angular Chart Control | Syncfusion
+description: Learn here about printing support in Syncfusion Essential Angular Chart Control, its elements, and more.
 form: Angular
 control: Chart
 documentation: ug
 ---
 
-# Printing Chart
+# Printing Chart in Angular Chart
 The rendered chart can be printed directly from the browser by calling the public method **print**. ID of the chart div element must be passed as argument to that method.
 
 {% highlight html %}
@@ -27,7 +27,7 @@ chartObj.print("container");
 
 This print method can be called by performing any action on the web page. For example, by clicking a button. While calling the print method in chart, print preview will be displayed in the browser.
 
-![](Printing_images/Printing_img1.png)
+![Angular Chart multiple chart](Printing_images/Printing_img1.png)
 
 [Click](http://ng2jq.syncfusion.com/#/chart/export) here to view the Printing chart online demo sample
 
@@ -55,7 +55,7 @@ chartObj.print("container1","container2");
 
 The Print preview of multiple Charts is shown below 
 
-![](Printing_images/Printing_img2.png)
+![Angular Chart page setup](Printing_images/Printing_img2.png)
 
 ## Page Setup
 

diff --git a/angular/CircularGauge/Getting-started.md b/angular/CircularGauge/Getting-started.md
@@ -1,12 +1,12 @@
 ---
-title: Getting Started for CircularGauge
-description: How to create a circulargauge, add scales, enable tooltip and other functionalities
+title: Getting Started with Angular CircularGauge Control | Syncfusion
+description: Learn here about getting started with Syncfusion Essential Angular CircularGauge Control, its elements, and more.
 platform: Angular
 control: circulargauge
 documentation: ug
 keywords: ejcirculargauge, circulargauge, circulargauge widget, Angular circulargauge
 ---
-#Getting Started
+# Getting Started with Angular CircularGauge
 
 Before we start with the CircularGauge, please refer [this page](https://help.syncfusion.com/angular-2/overview) for general information regarding integrating Syncfusion widget’s.
 
@@ -210,7 +210,7 @@ npm start
 
 * Browse to [http://localhost:3000](http://localhost:3000) to see the application. And navigate to circularGauge 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) 
+![Angular CircularGauge routes](Getting-started-images/Getting-Started_img1.png) 
 
 ## Set Background Color
 
@@ -227,7 +227,7 @@ You can draw the speedometer with dark background and to vary the speed of the p
 
 The above code example renders a **Gauge** as shown in the following screen shot.
 
-![](Getting-started-images/Getting-Started_img2.png)
+![Angular CircularGauge background color](Getting-started-images/Getting-Started_img2.png)
 
 ## Provide scale values
 
@@ -254,7 +254,7 @@ The above code example renders a **Gauge** as shown in the following screen shot
 
 On executing the above code, sample renders a **Circular Gauge** with customized labels as follows.
 
-![](Getting-started-images/Getting-Started_img3.png)
+![Angular CircularGauge scale value](Getting-started-images/Getting-Started_img3.png)
 
 ## Add Label Customization
 
@@ -279,7 +279,7 @@ To display the values in the **Gauge**, scale labels are used. You can customize
 
 On executing the above code, sample renders a default **Circular Gauge** with customized labels as follows.
 
-![](Getting-started-images/Getting-Started_img4.png)
+![Angular CircularGauge add label](Getting-started-images/Getting-Started_img4.png)
 
 ## Add pointer data
 
@@ -313,7 +313,7 @@ You can use three pointers that denote kilometer value, rotation per minute valu
 
 On executing the above code, sample renders a customized **Circular Gauge** as follows.
 
-![](Getting-started-images/Getting-Started_img5.png)
+![Angular CircularGauge add pointer](Getting-started-images/Getting-Started_img5.png)
 
 ## Add Tick Details
 
@@ -342,7 +342,7 @@ You can display the tick value with customization as given in the following code
 
 On executing the above code, sample renders a **Circular Gauge** with customized labels as follows.
 
-![](Getting-started-images/Getting-Started_img6.png)
+![Angular CircularGauge add ticks](Getting-started-images/Getting-Started_img6.png)
 
 ## Add Range Values
 
@@ -372,5 +372,5 @@ Ranges denote the property of scale value in the speedometer. The color values o
 
 On executing the above code, sample renders a **Circular Gauge** with customized range as follows.
 
-![](Getting-started-images/Getting-Started_img7.png)
+![Angular CircularGauge add range](Getting-started-images/Getting-Started_img7.png)
 
diff --git a/angular/CurrencyTextbox/RTL-Support.md b/angular/CurrencyTextbox/RTL-Support.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: RTL-Support
-description: rtl support
+title: RTL Support in Angular CurrencyTextBox Control | Syncfusion
+description: Learn here about RTL Support in Syncfusion Essential Angular CurrencyTextBox Control, its elements, and more.
 platform: Angular
 control: CurrencyTextBox  
 documentation: ug
 ---
 
-# RTL Support
+# RTL Support in Angular CurrencyTextBox
 
 The **Textbox** provides **RTL** (Right-To-Left) support. The alignment of CurrencyTextBox can be changed from **Left-To-Right** into **Right-To-Left**.
 
@@ -44,4 +44,4 @@ export class CurrencyTextboxComponent {
 
 The output for CurrencyTextBox when **enableRTL** is **“true”** is as follows. 
 
-![](/angular/CurrencyTextbox/RTL-Support_images/RTL-Support_img1.png)
+![Angular CurrencyTextBox RTL support](RTL-Support_images/RTL-Support_img1.png)
diff --git a/angular/Dialog/animation.md b/angular/Dialog/animation.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Syncfusion animation
-description: animation
+title: Animation in Angular Dialog Control | Syncfusion
+description: Learn here about animation support in Syncfusion Essential Angular Dialog Control, its elements, and more.
 platform: Angular
 control: Angular- Dialog
 documentation: ug
 ---
 
-## Animation
+# Animation in Angular Dialog
 
 The Dialog component can be animated while opening and closing the dialog.
 

diff --git a/angular/Dialog/appearance-and-styling.md b/angular/Dialog/appearance-and-styling.md
@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Syncfusion appearance-and-styling
-description: appearance and styling
+title: Appearance and styling in Angular Dialog Control | Syncfusion
+description: Learn here about appearance and styling in Syncfusion Essential Angular Dialog Control, its elements, and more.
 platform: Angular
 control: Angular- Dialog
 documentation: ug
 ---
 
-## Appearance and styling
+# Appearance and styling in Angular Dialog
 
-### Showing header
+## Showing header
 
 In order to display any title for our dialog, we can use the **showHeader** property to display the header of the Dialog. By default, showHeader property is true in Dialog.	
 

diff --git a/angular/DropDownList/Customization.md b/angular/DropDownList/Customization.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Customization in DropDownList widget
-description: Customization in DropDownList widget 
+title: Customization in Angular DropDownList Control | Syncfusion
+description: Learn here about Customization in Syncfusion Essential Angular DropDownList Control, its elements, and more.
 platform: Angular
 control: DropDownList
 documentation: ug
 ---
 
-# Customization
+# Customization in Angular DropDownList
 
 ## Adding watermark text
 
@@ -54,9 +54,9 @@ export class DropDownListComponent {
 
 {% endhighlight %}
 
-![](Customization_images/Customization_img1.png)
+![Angular DropDownList customization](Customization_images/Customization_img1.png)
 
-![](Customization_images/Customization_img2.png)
+![Angular DropDownList watermark text](Customization_images/Customization_img2.png)
 
 ## Applying Rounded Corner
 
@@ -101,7 +101,7 @@ export class DropDownListComponent {
 
 {% endhighlight %}
 
-![](Customization_images/Customization_img3.png)
+![Angular DropDownList applying rounded corner](Customization_images/Customization_img3.png)
 
 I> The browser support details for rounded corner is given [here](http://www.w3schools.com/cssref/css3_pr_border-radius.asp).
 
@@ -150,7 +150,7 @@ export class DropDownListComponent {
 
 {% endhighlight %}
 
-![](Customization_images/Customization_img4.png)
+![Angular DropDownList enable disable](Customization_images/Customization_img4.png)
 
 N> you can disable/enable the single or multiple list items by using [disableItemsByIndices](http://help.syncfusion.com/api/js/ejdropdownlist#methods:disableitemsbyindices) and [enableItemsByIndices](http://help.syncfusion.com/api/js/ejdropdownlist#methods:enableitemsbyindices) property.
 
@@ -201,4 +201,4 @@ export class DropDownListComponent {
 
 {% endhighlight %}
 
-![](Customization_images/Customization_img5.png)
+![Angular DropDownList HTML Attributes](Customization_images/Customization_img5.png)
diff --git a/angular/Splitter/Getting-Started.md b/angular/Splitter/Getting-Started.md
@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Getting-Started
-description: getting started
+title: Getting Started with Angular Splitter Control | Syncfusion
+description: Learn here about getting started with Syncfusion Essential Angular Splitter Control, its elements, and more.
 platform: Angular
 control: Splitter
 documentation: ug
 ---
 
-# Getting Started
+# Getting Started with Angular Splitter
 
 This section helps to get started of the Splitter component in an Angular application.
 
-![](Getting_Started_images/Getting_Started_img1.png) 
+![Angular Splitter component](Getting_Started_images/Getting_Started_img1.png) 
 
 ## Create a Splitter
 

diff --git a/angular/Splitter/RTL-Support.md b/angular/Splitter/RTL-Support.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: RTL Support
-description: RTL Support
+title: RTL Support in Angular Splitter Control | Syncfusion
+description: Learn here about RTL Support in Syncfusion Essential Angular Splitter Control, its elements, and more.
 platform: Angular
 control: Splitter
 documentation: ug
 ---
 
-# RTL Support
+# RTL Support in Angular Splitter
 
 **Splitter** provides you with **RTL (Right-To-Left)** support. The alignment of Splitter can be changed from Left-To-Right to Right-To-Left.
 
@@ -78,5 +78,5 @@ Define **“enableRTL”** property as true in constructor file.
 
 The output for Splitter when **enableRTL** is “true”.
 
-![](RTL-Support_images\RTL-Support_img1.png) 
+![Angular Splitter RTL support](RTL-Support_images\RTL-Support_img1.png) 
 
diff --git a/angular/Toolbar/Getting-Started.md b/angular/Toolbar/Getting-Started.md
@@ -1,22 +1,22 @@
 ---
 layout: post
-title: Getting-Started | Toolbar | JavaScript | Syncfusion
-description: getting started
+title: Getting Started with Angular Toolbar Control | Syncfusion
+description: Learn here about getting started with Syncfusion Essential Angular Toolbar Control, its elements, and more.
 platform: Angular
 control: Toolbar
 documentation: ug
 keywords: ejtoolbar, toolbar, js toolbar 
 ---
 
-# Getting Started
+# Getting Started with Angular Toolbar
 
 This section explains briefly about how to create a **Toolbar** in your application with **JavaScript.**
 
 ## Create Toolbar for PDF Reader
 
 **Toolbar** control supports displaying a list of tools in a Web page. This control is capable of customizing toolbar items with any functionality by using enriched **client-side** methods. This control consists of a collection of **unordered lists** contains text and images into a **&lt;div&gt;.** From the following section, you can learn how to customize **toolbar** control for a **PDF reader** scenario. The following screen shot shows the appearance of **toolbar** in **PDF reader** simulator application.
 
-![](/js/Toolbar/Getting-Started_images/Getting-Started_img1.png) 
+![Angular Toolbar PDF Reader](Getting-Started_images/Getting-Started_img1.png) 
 
 ## Create Toolbar control
 
@@ -73,7 +73,7 @@ export class ToolBarComponent {
 
 Output of the above steps
 
-![](/js/Toolbar/Getting-Started_images/Getting-Started_img2.png)
+![Angular Toolbar creation](Getting-Started_images/Getting-Started_img2.png)
 
 ## Initialize Toolbar Items
 
@@ -206,7 +206,7 @@ export class ToolBarComponent {
 
 Execute the code to render a toolbar with a list of **toolbar items**.
 
-![](/js/Toolbar/Getting-Started_images/Getting-Started_img3.png)
+![Angular Toolbar Initialize items](Getting-Started_images/Getting-Started_img3.png)
 
 Toolbar with list of toolbar items
 {:.caption}
@@ -338,7 +338,7 @@ export class ToolBarComponent {
 
 Execute the code to render a **toolbar items** with separator.
 
-![](/js/Toolbar/Getting-Started_images/Getting-Started_img4.png)
+![Angular Toolbar Rendering](Getting-Started_images/Getting-Started_img4.png)
 
 ## Add Actions to Toolbar Items
 
@@ -398,7 +398,7 @@ You can apply the following styles with the above styles to design the **PDF hea
 
 Execute the given code to render a **PDF reader** as follows.
 
-![](/js/Toolbar/Getting-Started_images/Getting-Started_img6.png) 
+![Angular Toolbar Add Actions](Getting-Started_images/Getting-Started_img6.png) 
 
 
 

diff --git a/angular/TreeMap/Getting-started.md b/angular/TreeMap/Getting-started.md
@@ -1,12 +1,12 @@
 ---
-title: Getting Started for TreeMap
-description: How to create a treemap, add levels, enable tooltip, colormapping and other functionalities
+title: Getting Started with Angular TreeMap Control | Syncfusion
+description: Learn here about getting started with Syncfusion Essential Angular TreeMap Control, its elements, and more.
 platform: Angular
 control: treemap
 documentation: ug
 keywords: ejtreemap, treemap, treemap widget, Angular treemap
 ---
-#Getting Started
+# Getting Started with Angular TreeMap
 
 Before we start with the TreeMap, please refer [this page](https://help.syncfusion.com/angular-2/overview) for general information regarding integrating Syncfusion widget’s.
 
@@ -272,7 +272,7 @@ npm start
 
 * Browse to [http://localhost:3000](http://localhost:3000) to see the application. And navigate to treemap 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) 
+![Angular TreeMap group with level](Getting-started-images/Getting-Started_img1.png) 
 
 ## Group with Levels
 
@@ -302,7 +302,7 @@ The following code sample explains how to group TreeMap Items using ‘Levels’
 
 The following screenshot displays grouping of **TreeMap****Items** using **Levels**.
 
-![](Getting-started-images/Getting-Started_img2.png)
+![Angular TreeMap customize by range](Getting-started-images/Getting-Started_img2.png)
 
 ## Customize TreeMap by Range
 
@@ -337,7 +337,7 @@ The following code sample explains how to customize TreeMap appearance using Ran
 
 The following screenshot displays a customized **TreeMap** control. 
 
-![](Getting-started-images/Getting-Started_img3.png)
+![Angular TreeMap color with path](Getting-started-images/Getting-Started_img3.png)
 
 ## Enable Tooltip
 
@@ -384,7 +384,7 @@ You can customize the Leaf level TreeMap items using `leafItemSettings`. The Lab
 
 The following screenshot displays a ToolTip in a **TreeMap** control.
 
-![](Getting-started-images/Getting-Started_img5.png)
+![Angular TreeMap enable tooltip](Getting-started-images/Getting-Started_img5.png)
 
 ## Enable Legend
 
@@ -418,7 +418,7 @@ The following code sample illustrates how to add labels for legend in a TreeMap.
 
 The following screenshot displays labels in a **TreeMap** control. 
 
-![](Getting-started-images/Getting-Started_img6.png)
+![Angular TreeMap Label for Legend](Getting-started-images/Getting-Started_img6.png)
 
 N> Population data is referred from [List of continents by population](http://en.wikipedia.org/wiki/List_of_continents_by_population).