Skip to content

SEO-187022-Angular-Spreadsheet-Bindind-Alt-text-missing #373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: hotfix/hotfix-v26.1.35
Choose a base branch
from
Open
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
20 changes: 10 additions & 10 deletions angular/Spreadsheet/Data-Binding.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
title: Data binding with Spreadsheet widget for Syncfusion Essential Angular-2
description: How to perform Data Binding and configure its properties like dataSource, query etc.
title: Data binding with Angular Spreadsheet widget | Syncfusion
description: Learn here about how to perform Data Binding and configure its properties like dataSource, query in SfAngular Spreadsheet control, its elements, and more.
platform: Angular
control: Spreadsheet
documentation: ug
---
# Data Binding
# Data binding with Syncfusion Angular Spreadsheet widget

Spreadsheet can be populated with external datasource using `dataSource` property. The `dataSource` property can be assigned either with the instance of `ej.DataManager` or JSON data array collection. Spreadsheet supports three different kinds of Data binding.

Expand Down Expand Up @@ -63,7 +63,7 @@ export class AppComponent {
{% endhighlight %}

The following output is displayed as a result of the above code snippets.
![](Data-Binding_images/Data-Binding_img1.png)
![Local Data in Angular Spreadsheet](Data-Binding_images/Data-Binding_img1.png)

## Remote Data

Expand Down Expand Up @@ -98,7 +98,7 @@ export class AppComponent {
{% endhighlight %}

The following output is displayed as a result of the above code snippets.
![](Data-Binding_images/Data-Binding_img2.png)
![Remote Data in Angular Spreadsheet](Data-Binding_images/Data-Binding_img2.png)

### Offline Mode

Expand Down Expand Up @@ -137,7 +137,7 @@ export class AppComponent {

{% endhighlight %}
The following output is displayed as a result of the above code snippets.
![](Data-Binding_images/Data-Binding_img2.png)
![Offline Mode in Angular Spreadsheet](Data-Binding_images/Data-Binding_img2.png)

## HTML Table Data

Expand Down Expand Up @@ -230,7 +230,7 @@ Place the table in index.html page,

{% endhighlight %}
The following output is displayed as a result of the above code snippets.
![](Data-Binding_images/Data-Binding_img3.png)
![HTML Table Data in Angular Spreadsheet](Data-Binding_images/Data-Binding_img3.png)

## Ways to bind data in Spreadsheet

Expand Down Expand Up @@ -411,7 +411,7 @@ export class AppComponent {

{% endhighlight %}
The following output is displayed as a result of the above code snippets.
![](Data-Binding_images/Data-Binding_img4.png)
![Cell Binding in Angular Spreadsheet](Data-Binding_images/Data-Binding_img4.png)

### Range Binding

Expand Down Expand Up @@ -537,7 +537,7 @@ export class AppComponent {
{% endhighlight %}

The following output is displayed as a result of the above code snippets.
![](Data-Binding_images/Data-Binding_img5.png)
![Range Binding in Angular Spreadsheet](Data-Binding_images/Data-Binding_img5.png)

### Sheet Binding

Expand Down Expand Up @@ -642,5 +642,5 @@ export class AppComponent {
{% endhighlight %}

The following output is displayed as a result of the above code snippets.
![](Data-Binding_images/Data-Binding_img6.png)
![Sheet Binding in Angular Spreadsheet](Data-Binding_images/Data-Binding_img6.png)