From 95f25d561069561c6df4fdb57b2e6fec45b38fee Mon Sep 17 00:00:00 2001 From: gowthamanthavasiyappan <90315799+gowthamanthavasiyappan@users.noreply.github.com> Date: Mon, 17 Apr 2023 17:52:00 +0530 Subject: [PATCH] SEO-3615-bing-issues --- angular/Chart/Printing.md | 10 +++++----- angular/CircularGauge/Getting-started.md | 20 ++++++++++---------- angular/CurrencyTextbox/RTL-Support.md | 8 ++++---- angular/Dialog/animation.md | 6 +++--- angular/Dialog/appearance-and-styling.md | 8 ++++---- angular/DropDownList/Customization.md | 16 ++++++++-------- angular/Splitter/Getting-Started.md | 8 ++++---- angular/Splitter/RTL-Support.md | 8 ++++---- angular/Toolbar/Getting-Started.md | 16 ++++++++-------- angular/TreeMap/Getting-started.md | 16 ++++++++-------- 10 files changed, 58 insertions(+), 58 deletions(-) diff --git a/angular/Chart/Printing.md b/angular/Chart/Printing.md index efdbe41d..15453d4d 100644 --- 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 index 3abee4c3..740b20db 100644 --- 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 index 553033bd..0ae9bb6d 100644 --- 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) \ No newline at end of file +![Angular CurrencyTextBox RTL support](RTL-Support_images/RTL-Support_img1.png) \ No newline at end of file diff --git a/angular/Dialog/animation.md b/angular/Dialog/animation.md index e8bbed59..2e8747c0 100644 --- 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 index 0a5542fc..9a063939 100644 --- 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 index 75bb7b83..4b00c82f 100644 --- 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) \ No newline at end of file +![Angular DropDownList HTML Attributes](Customization_images/Customization_img5.png) \ No newline at end of file diff --git a/angular/Splitter/Getting-Started.md b/angular/Splitter/Getting-Started.md index b16d5862..ecc2583c 100644 --- 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 index 333dcaaf..d237091e 100644 --- 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 index 714fb882..2402df6b 100644 --- a/angular/Toolbar/Getting-Started.md +++ b/angular/Toolbar/Getting-Started.md @@ -1,14 +1,14 @@ --- 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.** @@ -16,7 +16,7 @@ This section explains briefly about how to create a **Toolbar** in your applicat **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 **<div>.** 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 index 6f41a643..4d90c1e5 100644 --- 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).