Merge pull request #205 from syncfusion-content/SEO-2971-Angular-Controls

Aishwarya-Ganesan · web-flow · commit 65c7ea89f983 · 2023-01-12T14:44:08.000+05:30
SEO-2971 - Angular Controls image alt text
diff --git a/angular/Chart/Exporting.md b/angular/Chart/Exporting.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Exporting options in Essential Angular Chart
-description: Learn how to export Chart as excel file or image.
+title: Exporting in Angular Chart Control | Syncfusion
+description: Learn here all about Exporting support in Syncfusion Essential Angular Chart control, its elements, and more.
 platform: Angular
 control: Chart
 documentation: ug
 ---
 
-# Exporting Chart
+# Exporting Chart in Essential Angular Chart
 
 Exporting a chart can be done in both client-side and in server-side. This can be modified by setting values to the property "mode" in exporting. Default value for mode is client. 
 
@@ -194,7 +194,7 @@ public void ExportChart(string Data, string ChartModel)
 
 Excel exporting is a server-side operation. In addition have to refer Syncfusion.XlsIO assembly to export as excel.
 
-![](Exporting_images/Exporting_img1.png)
+![Excel Exporting in Angular Chart](Exporting_images/Exporting_img1.png)
 
 #### Multiple chart excel exporting
 
@@ -260,7 +260,7 @@ Export multiple chart to excel at server-side
 
 {% endhighlight %}
 
-![](Exporting_images/Exporting_img2.png)
+![Multiple Excel Exporting in Angular Chart](Exporting_images/Exporting_img2.png)
 
 ## Naming the exported file
 
@@ -279,7 +279,7 @@ We can also rotate the chart and can export it. Possible angles of rotation are
        
 {% endhighlight %}
 
-![](Exporting_images/Exporting_img3.png)
+![Rotating the Chart in Angular](Exporting_images/Exporting_img3.png)
 
 ## Setting orientation for the document
 
diff --git a/angular/GettingStarted/getting-started-with-webpack-aot.md b/angular/GettingStarted/getting-started-with-webpack-aot.md
@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Getting started with Webpack Ahead-of-Time Configuration
-description: Overview of Syncfusion Essential Angular.
+title: Getting started with Webpack in Angular Application | Syncfusion
+description: Learn here all about Getting started with Webpack Ahead-of-Time Configuration in Syncfusion  Essential Angular Chart control, its elements, and more.
 platform: Angular
 control: Introduction
 documentation: ug
 ---
 
 
-# Getting started with Webpack Ahead-of-Time Configuration
+# Getting started with Webpack in Angular Application
 
 To quick start with Syncfusion JavaScript Angular components run the below commands to clone the repository for [Webpack starter](https://github.com/syncfusion/angular2-seeds) and installing required dependency packages.
 
@@ -68,13 +68,13 @@ The below steps depicts the configuration of `@ngtools/webpack` in Angular appli
 
 ### Options for AngularCompilerPlugin
 
-* Add instance of [AngularCompilerPlugin](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack), which has an apply property. This apply property is called by the webpack compiler, giving access to the entire compilation life cycle. Add options `tsConfigPath` and `entryModule` with `AngularCompilerPlugin` instance.
+* Add instance of [AngularCompilerPlugin](https://github.com/angular/angular-cli/tree/main/packages/ngtools/webpack), which has an apply property. This apply property is called by the webpack compiler, giving access to the entire compilation life cycle. Add options `tsConfigPath` and `entryModule` with `AngularCompilerPlugin` instance.
 
   * `tsConfigPath` - The path to the `tsconfig.json` file. In your `tsconfig.json`, you can pass options to the Angular Compiler with `angularCompilerOptions`.
 
   * `entryModule` - Optional if specified in `angularCompilerOptions`. The path and classname of the main application module. This follows the format `path/to/file#ClassName`.
 
-N> To know more about Options in AOT refer [here](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack)
+N> To know more about Options in AOT refer [here](https://github.com/angular/angular-cli/tree/main/packages/ngtools/webpack)
 
 Refer to the below AOT configuration code snippet for `config/webpack.dev.js` file. 
 
@@ -652,10 +652,10 @@ export const rootRouterConfig: Routes = [
 
 ## Running the application
 
-* Now run the application with below command and navigate to [http://localhost:3000/](http://localhost:3000/) to see the output window.
+* Now run the application with below command and navigate to [http://localhost:3000/](https://locall.host/3000/) to see the output window.
 
 {% highlight javascript %}
 npm start
 {% endhighlight %}
 
-![](/angular/GettingStarted/Images/aotoutput.png)
+![Running the Application in Angular Chart ](GettingStarted/Images/aotoutput.png)
diff --git a/angular/Grid/Grouping.md b/angular/Grid/Grouping.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Grouping with Grid widget for Syncfusion Essential Angular-2
-description: How to enable grouping and its functionalities
+title: Grouping in Angular Grid Control | Syncfusion 
+description: Learn here all about Grouping support in Syncfusion Essential Angular Grid control, its elements, and more.
 platform: Angular
 control: Grid
 documentation: ug
 api: /api/Angular/grid
 --- 
-# Grouping
+# Grouping in Essential Angular Grid
 
 The Grid control has options to group the records based on the required column. When grouping is applied, grouped records are organized into a hierarchical structure to facilitate easier expand and collapse of records. To enable grouping, set [`allowGrouping`](https://help.syncfusion.com/api/angular/ejgrid#members:allowgrouping "allowGrouping") property as `true`.
 
@@ -49,7 +49,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img1.png)
+![Angular Grid grouping](Grouping_images/Grouping_img1.png)
 
 
 ## Initial Grouping
@@ -94,7 +94,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img2.png)
+![Angular Grid initial grouping](Grouping_images/Grouping_img2.png)
 
 
 ## Multi-Column Grouping
@@ -139,7 +139,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img3.png)
+![Angular Grid multi column grouping](Grouping_images/Grouping_img3.png)
 
 
 ## Group buttons
@@ -184,7 +184,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img4.png)
+![Angular Grid group buttons](Grouping_images/Grouping_img4.png)
 
 
 ## Hide Ungroup button
@@ -229,7 +229,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img5.png)
+![Angular Grid hide ungroup button](Grouping_images/Grouping_img5.png)
 
 
 ## Hide Grouped Column
@@ -274,7 +274,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img6.png)
+![Angular Grid hide grouped column](Grouping_images/Grouping_img6.png)
 
 
 ## AutoSize Drop Area
@@ -319,7 +319,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img7.png)
+![Angular Grid size drop area](Grouping_images/Grouping_img7.png)
 
 
 ## Hide Drop area
@@ -364,7 +364,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img8.png)
+![Angular Grid hide drop area](Grouping_images/Grouping_img8.png)
 
 
 ## Group Caption Format / Group Caption Template
@@ -420,9 +420,9 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img9.png)
+![Angular Grid group Caption Format](Grouping_images/Grouping_img9.png)
 
-![](Grouping_images/Grouping_img10.png)
+![Angular Grid group caption template](Grouping_images/Grouping_img10.png)
 
 ## Handling grouped records count in server-side    
 
@@ -505,4 +505,4 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Grouping_images/Grouping_img11.png)
+![Angular Grid handling grouped records count in server side](Grouping_images/Grouping_img11.png)
diff --git a/angular/Grid/Search.md b/angular/Grid/Search.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Searching with Grid widget for Syncfusion Essential Angular-2
-description: How to enable search opition and its functionalities
+title: Searching in Angular Grid Control | Syncfusion
+description: Learn here all about Searching support in Syncfusion Essential Angular Grid control, its elements, and more.
 platform: Angular
 control: Grid
 documentation: ug
 api: /api/Angular/grid
 --- 
-# Searching
+# Searching in Essential Angular Grid
 
 The grid has an option to search its content using the JavaScript method [`search`](https://help.syncfusion.com/api/angular/ejgrid#methods:search "search") with search key as parameter. Also, it provides an option to integrate Search text box in grid toolbar, by adding `search` toolbar item in [`toolbarSetting.toolbarItems`](https://help.syncfusion.com/api/angular/ejgrid#members:toolbarsettings-toolbaritems "toolbarSetting.toolbarItems") property.
 
@@ -49,7 +49,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](searching_images/searching_img1.png)
+![Angular Grid searching](searching_images/searching_img1.png)
 
 
 ## Initial Searching
@@ -98,7 +98,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](searching_images/searching_img2.png)
+![Angular Grid initial searching](searching_images/searching_img2.png)
 
 
 List of supported operators in searching.
diff --git a/angular/Grid/Sorting.md b/angular/Grid/Sorting.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Sorting with Grid widget for Syncfusion Essential JS
-description: How to enable sorting and its functionalities
-platform: js
+title: Sorting in Angular Grid Control | Syncfusion
+description: Learn here all about Sorting support in Syncfusion Essential Angular Grid control, its elements, and more.
+platform: Angular
 control: Grid
 documentation: ug
 api: /api/js/ejgrid
 --- 
-# Sorting
+# Sorting in Essential Angular Grid
 
 The Grid control has support to sort data bound columns in ascending or descending order. This can be achieved by setting [`allowSorting`](https://help.syncfusion.com/api/angular/ejgrid#members:allowsorting "allowSorting") property as `true`. 
 
@@ -45,12 +45,12 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](sorting_images/sorting_img1.png)
+![Angular Grid sorting](sorting_images/sorting_img1.png)
 
 
 ## Initial Sorting
 
-Through `sortedColumns` property of [`sortSettings`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings "sortSettings"), you can sort the columns while initializing the grid itself. You need to specify the [`field`](https://help.syncfusion.com/api/angular/grid#members:sortsettings-sortedcolumns-field "field") (column) name and [`direction`](https://help.syncfusion.com/api/angular/grid#members:sortsettings-sortedcolumns-direction "direction") in the `sortedColumns`.
+Through `sortedColumns` property of [`sortSettings`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings "sortSettings"), you can sort the columns while initializing the grid itself. You need to specify the [`field`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings-sortedcolumns-field "field") (column) name and [`direction`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings-sortedcolumns-direction "direction") in the `sortedColumns`.
 
 N> 1. For [`direction`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings-sortedcolumns-direction "direction") property you can assign either `string` value ("descending") or `enum` value (`ej.sortOrder.Descending`). 
 N> 2. You can add multiple columns in `sortedColumns` for multi column sorting while initializing the grid itself.
@@ -89,7 +89,7 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](sorting_images/sorting_img2.png)
+![Angular Grid initial sorting](sorting_images/sorting_img2.png)
 
 
 ## Multi-Column Sorting
@@ -135,7 +135,7 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](sorting_images/sorting_img3.png)
+![Angular Grid multi column sorting](sorting_images/sorting_img3.png)
 
 
 ## Stable sorting
@@ -184,7 +184,7 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](sorting_images/sorting_img4.png)
+![Angular Grid stable sorting](sorting_images/sorting_img4.png)
 
 
 ## Touch options
@@ -227,6 +227,6 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](sorting_images/sorting_img5.png)
+![Angular Grid touch options](sorting_images/sorting_img5.png)
 
 N> To get the sorted data of the grid after sorting a column you can refer the [`How To`](https://help.syncfusion.com/angular/grid/how-to "Getting Datasource of Grid in Sorted Order").
