diff --git a/angular/Accordion/Getting-Started-images/Getting-Started_img4.png b/angular/Accordion/Getting-Started-images/angular-accordion-corner-settin.png similarity index 100% rename from angular/Accordion/Getting-Started-images/Getting-Started_img4.png rename to angular/Accordion/Getting-Started-images/angular-accordion-corner-settin.png diff --git a/angular/Accordion/Getting-Started-images/Getting-Started_img2.png b/angular/Accordion/Getting-Started-images/angular-accordion-create.png similarity index 100% rename from angular/Accordion/Getting-Started-images/Getting-Started_img2.png rename to angular/Accordion/Getting-Started-images/angular-accordion-create.png diff --git a/angular/Accordion/Getting-Started-images/Getting-Started_img5.png b/angular/Accordion/Getting-Started-images/angular-accordion-customize-icon.png similarity index 100% rename from angular/Accordion/Getting-Started-images/Getting-Started_img5.png rename to angular/Accordion/Getting-Started-images/angular-accordion-customize-icon.png diff --git a/angular/Accordion/Getting-Started-images/Getting-Started_img1.png b/angular/Accordion/Getting-Started-images/angular-accordion-getting-Started.png similarity index 100% rename from angular/Accordion/Getting-Started-images/Getting-Started_img1.png rename to angular/Accordion/Getting-Started-images/angular-accordion-getting-Started.png diff --git a/angular/Accordion/Getting-Started-images/Getting-Started_img3.png b/angular/Accordion/Getting-Started-images/angular-accordion-multiple-open.png similarity index 100% rename from angular/Accordion/Getting-Started-images/Getting-Started_img3.png rename to angular/Accordion/Getting-Started-images/angular-accordion-multiple-open.png diff --git a/angular/Accordion/Getting-Started.md b/angular/Accordion/Getting-Started.md index 651430fb..38d146d0 100644 --- a/angular/Accordion/Getting-Started.md +++ b/angular/Accordion/Getting-Started.md @@ -1,12 +1,12 @@ --- -title: Getting Started for Angular Accordion -description: Getting Started for Angular Accordion +title: Getting Started with Angular Accordion | Syncfusion +description: Learn here all about getting started with Syncfusion Essential Angular Accordion, it's elements and more details. platform: Angular control: Accordion documentation: Ug keywords: ejaccordion, js accordion, accordion --- -# Getting started +# Getting started with Angular Accordion This section explains briefly about how to create an **Accordion** in your application with **Angular**. @@ -16,7 +16,7 @@ This section encompasses the details on how you can configure the **Accordion** The following screenshot illustrates you the usage of **Accordion** control in listing the controls under the Essential Studio products. -![](Getting-Started-images/Getting-Started_img1.png) +![Angular Accordion getting started.](Getting-Started-images/angular-accordion-getting-Started.png) The usage of **Accordion** control is described in the following sections. @@ -146,7 +146,7 @@ Create the Accordion control as follows. You can execute the above code example to display the Accordion control with simple control list. -![](Getting-Started-images/Getting-Started_img2.png) +![Angular Accordion getting started.](Getting-Started-images/angular-accordion-create.png) You can customize the Accordion control using various properties. The Accordion control properties and its default values are described in the following section. @@ -257,7 +257,7 @@ You can also open all the panels during initialization using the **selectedItems **Accordion** control with **enableMultipleOpen** property is illustrated in the following screen shot. -![](Getting-Started-images/Getting-Started_img3.png) +![Angular Accordion getting started.](Getting-Started-images/angular-accordion-multiple-open.png) ### Setting rounded corner @@ -343,7 +343,7 @@ N> showRoundedCorner property is False by default. The following screenshot illustrates the **Accordion** control with rounded corners. -![](Getting-Started-images/Getting-Started_img4.png) +![Angular Accordion getting started.](Getting-Started-images/angular-accordion-corner-setting.png) ## Customize Icon @@ -434,5 +434,5 @@ You can set the Up or Down arrow icon to **Accordion** header, by adding **e-arr The following screenshot illustrates the customization of **selectedHeader** and **header** of the **Accordion** control. -![](Getting-Started-images/Getting-Started_img5.png) +![Angular Accordion getting started.](Getting-Started-images/angular-accordion-customize-icon.png) diff --git a/angular/AutoComplete/data-binding.md b/angular/AutoComplete/data-binding.md index 6288c3a2..0ffc3533 100644 --- a/angular/AutoComplete/data-binding.md +++ b/angular/AutoComplete/data-binding.md @@ -1,13 +1,13 @@ --- layout: post -title: Syncfusion data binding -description: data binding +title: Data Binding in Angular AutoComplete Component |Syncfusion +description: Learn here all about data binding in Syncfusion Essential Angular AutoComplete, it's elements and more details. platform: Angular control: Autocomplete documentation: ug --- -## Data Binding +# Data Binding in Angular AutoComplete Component In order to render the AutoComplete component, the data needs to be bound to it in a proper way. The below sections explains about how to bind either the local or remote data to the AutoComplete component. @@ -82,7 +82,7 @@ export class AppComponent { Run the above code to render the following output. -![Local data](databinding_images\localdata_img1.png) +![Local data in Angular AutoComplete data binding.](databinding_images\angular-autocomplete-local-data.png) ## Remote data @@ -117,7 +117,7 @@ export class AppComponent { Run the above code to render the following output. -![remote data](databinding_images\odata_img1.png) +![Angular AutoComplete data binding remote data.](databinding_images\angular-autocomplete-remote-data.png) ### WebAPI @@ -156,7 +156,7 @@ export class AppComponent { Run the above code to render get the following output. -![Web api](databinding_images\webapi_img1.png) +![Web api in Angular AutoComplete data binding.](databinding_images\angular-autocomplete-webapi.png) NOTE @@ -171,4 +171,4 @@ In remote binding, the server might not return data sometimes due to various rea [action complete](http://help.syncfusion.com/api/js/ejautocomplete) event -[action success](http://help.syncfusion.com/api/js/ejautocomplete) event +[action success](http://help.syncfusion.com/api/js/ejautocomplete) event \ No newline at end of file diff --git a/angular/AutoComplete/databinding_images/localdata_img1.png b/angular/AutoComplete/databinding_images/angular-autocomplete-local-data.png similarity index 100% rename from angular/AutoComplete/databinding_images/localdata_img1.png rename to angular/AutoComplete/databinding_images/angular-autocomplete-local-data.png diff --git a/angular/AutoComplete/databinding_images/odata_img1.png b/angular/AutoComplete/databinding_images/angular-autocomplete-remote-data.png similarity index 100% rename from angular/AutoComplete/databinding_images/odata_img1.png rename to angular/AutoComplete/databinding_images/angular-autocomplete-remote-data.png diff --git a/angular/AutoComplete/databinding_images/webapi_img1.png b/angular/AutoComplete/databinding_images/angular-autocomplete-webapi.png similarity index 100% rename from angular/AutoComplete/databinding_images/webapi_img1.png rename to angular/AutoComplete/databinding_images/angular-autocomplete-webapi.png diff --git a/angular/ProgressBar/Getting-Started.md b/angular/ProgressBar/Getting-Started.md index 6e718fdf..920863e7 100644 --- a/angular/ProgressBar/Getting-Started.md +++ b/angular/ProgressBar/Getting-Started.md @@ -1,21 +1,21 @@ --- layout: post -title: Getting-Started | ProgressBar | JavaScript | Syncfusion -description: getting started +title: Getting Started with Angular ProgressBar Component | Syncfusion +description: Learn here all about getting started with Syncfusion Essential Angular ProgressBar, it's elements and more details. platform: Angular control: ProgressBar documentation: ug keywords: ejprogressbar, progressbar, js progressbar --- -# Getting Started +# Getting Started with Angular ProgressBar This section briefly describes how to create a **ProgressBar** control using **Javascript** and learn its features. **Essential JavaScript** **ProgressBar** displays a **ProgressBar** within a webpage that allows you to show the progress of an event. Here, you can learn how to customize the progress and color of the **ProgressBar** in a real-time application to indicate the strength of the password, where the progress changes with respect to the change in length of the password. This helps you to validate the password is typed. The following screenshot shows the **ProgressBar.** -![](/js/ProgressBar/Getting-Started_images/Getting-Started_img1.png) +![Getting Started with Angular ProgressBar.](/js/ProgressBar/Getting-Started_images/angular-progressbar-getting-Started.png) ## Create a ProgressBar @@ -87,7 +87,7 @@ Here, you can initialize the properties of the **ProgressBar** such as height, v The following screenshot displays a **ProgressBar** control. -![](/js/ProgressBar/Getting-Started_images/Getting-Started_img2.png) +![Getting Started with Angular ProgressBar.](/js/ProgressBar/Getting-Started_images/angular-progressbar-create.png) Include the following code within the **<head>** tag to change the page layout. @@ -192,11 +192,11 @@ You can change themes or appearance of the ProgressBar as required. The final output is displayed as follows. -![](/js/ProgressBar/Getting-Started_images/Getting-Started_img3.png) +![Getting Started with Angular ProgressBar.](/js/ProgressBar/Getting-Started_images/angular-progressbar-outputs.png) -![](/js/ProgressBar/Getting-Started_images/Getting-Started_img4.png) +![Getting Started with Angular ProgressBar.](/js/ProgressBar/Getting-Started_images/angular-progressbar-final-output.png) -![](/js/ProgressBar/Getting-Started_images/Getting-Started_img5.png) +![Getting Started with Angular ProgressBar.](/js/ProgressBar/Getting-Started_images/angular-progressbar-output-display.png) You can also bind an event at the start and finish of a ProgressBar by using the start, complete and change properties of the ProgressBar. diff --git a/angular/ProgressBar/Getting-Started_images/Getting-Started_img2.png b/angular/ProgressBar/Getting-Started_images/angular-progressbar-create.png similarity index 100% rename from angular/ProgressBar/Getting-Started_images/Getting-Started_img2.png rename to angular/ProgressBar/Getting-Started_images/angular-progressbar-create.png diff --git a/angular/ProgressBar/Getting-Started_images/Getting-Started_img4.png b/angular/ProgressBar/Getting-Started_images/angular-progressbar-final-output.png similarity index 100% rename from angular/ProgressBar/Getting-Started_images/Getting-Started_img4.png rename to angular/ProgressBar/Getting-Started_images/angular-progressbar-final-output.png diff --git a/angular/ProgressBar/Getting-Started_images/Getting-Started_img1.png b/angular/ProgressBar/Getting-Started_images/angular-progressbar-getting-Started.png similarity index 100% rename from angular/ProgressBar/Getting-Started_images/Getting-Started_img1.png rename to angular/ProgressBar/Getting-Started_images/angular-progressbar-getting-Started.png diff --git a/angular/ProgressBar/Getting-Started_images/Getting-Started_img5.png b/angular/ProgressBar/Getting-Started_images/angular-progressbar-output-display.png similarity index 100% rename from angular/ProgressBar/Getting-Started_images/Getting-Started_img5.png rename to angular/ProgressBar/Getting-Started_images/angular-progressbar-output-display.png diff --git a/angular/ProgressBar/Getting-Started_images/Getting-Started_img3.png b/angular/ProgressBar/Getting-Started_images/angular-progressbar-outputs.png similarity index 100% rename from angular/ProgressBar/Getting-Started_images/Getting-Started_img3.png rename to angular/ProgressBar/Getting-Started_images/angular-progressbar-outputs.png