Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Integration of Syncfusion Angular components into Angular Quick Start - Webpack
description: Overview of Syncfusion Essential Angular.
title: Getting Started with Angular Quick Start - Webpack | Syncfusion
description: Learn here about getting started with Syncfusion Essential Angular Platform, its elements, and more.
platform: Angular
control: Introduction
documentation: ug
Expand Down Expand Up @@ -391,7 +391,7 @@ npm start

N> If you get the following error, you need to refer the corresponding image type `cur` in `config/webpack.common.js` file.

![](/angular/GettingStarted/Images/cssloader.png)
![Run application error in Angular](/angular/GettingStarted/Images/cssloader.png)

* Refer the below code snippet to refer the image type `cur`.
{% highlight javascript %}
Expand Down Expand Up @@ -433,7 +433,7 @@ module.exports = {

N>If you get typescript error like in the below image, then we should include the typings dependencies `node and jasmine` in `src/tsconfig.json` file.

![](/angular/GettingStarted/Images/typingsissue.png)
![Transcripted Error in Angular](/angular/GettingStarted/Images/typingsissue.png)

{% highlight javascript %}

Expand All @@ -460,4 +460,4 @@ N>If you get typescript error like in the below image, then we should include th

{% endhighlight %}

![](/angular/GettingStarted/Images/webpackoutput.png)
![Run the application in Angular](/angular/GettingStarted/Images/webpackoutput.png)
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Getting Started with Angular on ASP.NET Core using Visual Studio 2015
description: Overview of Syncfusion Essential Angular
title: Getting Started with Angular Platform using VS 2015 | syncfusion
description: Learn here about getting started with Angular in Syncfusion Essential Angular Control, its elements, and more.
platform: Angular
control: Introduction
documentation: ug
---


# Getting Started with Angular on ASP.NET Core using Visual Studio 2015
# Getting Started with Angular using Visual Studio 2015

ASP.NET Core is a cross-platform framework for building applications such as web apps. Now, we are going to discuss about how to create a angular application in ASP.NET Core Environment in detailed.

Expand All @@ -34,7 +34,7 @@ ASP.NET Core is a cross-platform framework for building applications such as web

* Create a new ASP.NET Core project in VS2015 and select Empty as template.

![](/angular/GettingStarted/Images/createapp.png)
![Create empty application in Angular](/angular/GettingStarted/Images/createapp.png)

## Configuration of Angular application

Expand Down Expand Up @@ -111,18 +111,18 @@ Refer the below code snippet for packages used in our application.

{% endhighlight %}

![](/angular/GettingStarted/Images/restore.png)
![Configuration of Angular application](/angular/GettingStarted/Images/restore.png)


![](/angular/GettingStarted/Images/npmpackages.png)
![NPM configuration file in Angular](/angular/GettingStarted/Images/npmpackages.png)

N> If the packages are not installed properly try the below steps in the sample's root folder.

* npm cache clean
* npm install
* Refer the below screenshot to check whether the `External Web Tools` are arranged in that specified order in Visual Studio 2015 (`Tools->options->Projects and Solutions->External Web Tools`)

![](/angular/GettingStarted/Images/path.png)
![External web tools in Angular](/angular/GettingStarted/Images/path.png)

* Copy the `src` folder in `Solution Explorer` from our [systemJS cloned seed](https://github.com/syncfusion/angular2-seeds/tree/systemjs) application. The cloned Angular-seed consists of following files.

Expand Down Expand Up @@ -289,12 +289,12 @@ gulp.task('default', ['watch', 'ts', 'copy:lib', 'copy:systemjs', 'copy:html', '
{% endhighlight %}
Once, you are finished with adding all Angular application files, you need to run the every gulp tasks via `View->Other Windows->Task Runner Explorer`.

![](/angular/GettingStarted/Images/gulptask.png)
![Task runner explorer in Angular](/angular/GettingStarted/Images/gulptask.png)


N> If we run our application, we will get a following typescript error while building the application. Because the Gulp task `ts` will do the same work of typescript compiler.

![](/angular/GettingStarted/Images/tscerror.png)
![Typescript error in Angular](/angular/GettingStarted/Images/tscerror.png)

So, we should disable the typescript compiler in our Angular environment.

Expand Down Expand Up @@ -808,4 +808,4 @@ gulp.task('default', ['watch', 'ts', 'copy:lib', 'copy:systemjs', 'copy:html', '

* To run the application, press `Ctrl+F5`.

![](/angular/GettingStarted/Images/output.png)
![Run the application in Angular](/angular/GettingStarted/Images/output.png)
16 changes: 8 additions & 8 deletions angular/RichTextEditor/Working-with-Tables.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
layout: post
title: Working with Tables opreation
description: Working with Tables customization
title: Working with Tables in Angular RichTextEditor Control | Syncfusion
description: Learn here about Working with Tables in Syncfusion Essential Angular RichTextEditor Control, its elements, and more.
platform: Angular
control: RichTextEditor
documentation: ug
---
# Working with Tables
# Working with Tables in Angular RichTextEditor

The editor provides tools that make to work with tables in your content. You can add, edit, and remove the table as well as perform other table related tasks.

Expand Down Expand Up @@ -50,7 +50,7 @@ export class RTEComponent {

You can insert a basic table by selecting the “Insert Table” tool from toolbar and drag the cursor over the grid until you highlight the number of columns and rows you want. A table can be inserted as large as with ten columns and eight rows (10 * 8 cells). When you finish inserting tables, click in a cell and start typing or insert an image.

![](WorkingwithTables_images/WorkingwithTables_img1.png)
![Insert a table in Angular RichTextEditor](WorkingwithTables_images/WorkingwithTables_img1.png)


N> If you want to make any adjustment with drawn table, you can [add/remove rows and columns](#insert-and-delete-a-row-or-column).
Expand All @@ -59,7 +59,7 @@ N> If you want to make any adjustment with drawn table, you can [add/remove rows

You can use custom table tools to insert tables with custom behaviors. You can create a table with more than ten columns and eight rows, as well as set the table related attributes (such as width, height, cell spacing/padding, and more) using the custom table dialog.

![](WorkingwithTables_images/WorkingwithTables_img2.png)
![Custom table in Angular RichTextEditor](WorkingwithTables_images/WorkingwithTables_img2.png)


## Insert and Delete a Row or Column
Expand All @@ -73,7 +73,7 @@ You can choose the following options to modify the inserted table from the toolb
* Delete a column
* Delete a row

![](WorkingwithTables_images/WorkingwithTables_img3.png)
![Insert and delete a row or column in Angular RichTextEditor](WorkingwithTables_images/WorkingwithTables_img3.png)


N> You can also quickly add a new row by clicking on the lower-right cell of the table and pressing the Tab key.
Expand All @@ -86,7 +86,7 @@ After you create a table, you can format the entire table by using **Table** **P
* Cell - border, spacing, and padding.
* Row - height, border, and text align.

![](WorkingwithTables_images/WorkingwithTables_img4.png)
![Format a table in Angular RichTextEditor](WorkingwithTables_images/WorkingwithTables_img4.png)


N> When you click in a table cell, the **Table** **Properties** option will be enabled under **Table** tool on the editor’s toolbar.
Expand All @@ -95,7 +95,7 @@ N> When you click in a table cell, the **Table** **Properties** option will be e

To delete a table from your content, focus on the table and select “Delete a Table” tool from toolbar. It will delete the entire table with all formatting content.

![](WorkingwithTables_images/WorkingwithTables_img9.png)
![Delete a table in Angular RichTextEditor](WorkingwithTables_images/WorkingwithTables_img9.png)


N> To delete the table contents alone, select the required content of the table which you want to delete and press Delete key. All the content disappears but the rows and columns remain along with its formatting.
10 changes: 5 additions & 5 deletions angular/Slider/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: Getting Started for Angular Slider
description: Getting Started for Angular Slider
title: Getting Started with Angular Slider Control | Syncfusion
description: Learn here about getting started with Syncfusion Essential Angular Slider Control, its elements, and more.
platform: Angular
control: Slider
documentation: Ug
keywords: ejslider, js slider, slider
---

# Getting Started
# Getting Started with Angular Slider

This section explains briefly about how to create a **Slider** control in your application with **Angular**.

Expand Down Expand Up @@ -125,7 +125,7 @@ npm start

N> if you want to use other port, open `package.json` file, then change port in `--port 3000` script and also change the port in `config/webpack.dev.js`.

![](Getting-Started_images/Getting-Started_img1.jpg)
![Running the web pack application in Angular Slider](Getting-Started_images/Getting-Started_img1.jpg)

## Create Slider in Angular Application using SystemJS

Expand Down Expand Up @@ -239,5 +239,5 @@ npm start

* Browse to [http://localhost:3000](http://localhost:3000) to see the application. And navigate to Slider 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.jpg)
![Running the systemJS application in angular Slider](Getting-Started_images/Getting-Started_img1.jpg)

10 changes: 5 additions & 5 deletions angular/Tooltip/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Getting started for Angular Tooltip
description: How to create the Tooltip in Angular
title: Getting started with Angular Tooltip Control | Syncfusion
description: Learn here about getting started with Syncfusion Essential Angular Tooltip Control, its elements, and more.
platform: Angular
control: Tooltip
documentation: ug
keywords : ejTooltip, Tooltip, js Tooltip, Tooltip widget
---
# Getting started
# Getting started with Angular Tooltip

## Preparing HTML document

Expand Down Expand Up @@ -125,7 +125,7 @@ Apply the following style sheet

{% endhighlight %}

![](Getteing-Started_images/Getteing-Started_img1.jpeg)
![Create a tooltip in Angular](Getteing-Started_images/Getteing-Started_img1.jpeg)

## Setting Dimensions

Expand Down Expand Up @@ -203,5 +203,5 @@ Apply the following styles to show the Tooltip.

{% endhighlight %}

![](Getteing-Started_images/Getteing-Started_img2.jpeg)
![Tooltip appearance in Angular](Getteing-Started_images/Getteing-Started_img2.jpeg)

11 changes: 5 additions & 6 deletions angular/TreeView/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: Getting Started for Angular TreeView
description: Getting Started for Angular TreeView
title: Getting Started with Angular TreeView Control | Syncfusion
description: Learn here about getting started with Syncfusion Essential Angular Treeview Control, its elements, and more.
platform: Angular
control: TreeView
documentation: Ug
keywords: ejtreeview, js treeview, treeview
---

# Getting Started
# Getting Started with Angular TreeView

This section explains briefly about how to create a **TreeView** control in your application with **Angular**.

Expand Down Expand Up @@ -184,7 +184,7 @@ npm start

N> if you want to use other port, open `package.json` file, then change port in `--port 3000` script and also change the port in `config/webpack.dev.js`.

![](Getting-Started_images/Getting-Started_img1.jpeg)
![Running the web pack application in Angular TreeView](Getting-Started_images/Getting-Started_img1.jpeg)

## Create TreeView in Angular Application using SystemJS

Expand Down Expand Up @@ -357,5 +357,4 @@ npm start

* Browse to [http://localhost:3000](http://localhost:3000) to see the application. And navigate to TreeView 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.jpeg)

![Running the systemJS application in Angular TreeView](Getting-Started_images/Getting-Started_img1.jpeg)