Two Way Databinding Property
Two way Databinding means that any data-related changes affecting the model are immediately propagated to the matching view(s), and vice-versa.
Angular Syncfusion Components supports Two way Databinding property which is bound to the controls with in the brackets ‘[()]’. In our Grid Component dataSource Property supports two way databinding property.
Refer to the below code snippet to declare the dataSource property through two way databinding in view.
[app.component.html]
<ej-grid [allowPaging]="true" [allowSorting]="true" [(dataSource)]="gridData"> <e-columns> <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right"></e-column> <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column> <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column> <e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column> <e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column> </e-columns> </ej-grid>
|
Refer to the below code snippet to pass the data to dataSource property in model.
[app.component.ts]
import { Component } from '@angular/core';
@Component({ selector: 'ej-app', templateUrl: './app.component.html', }) export class AppComponent { public gridData: any; constructor() { this.gridData = [{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38 }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61 }, { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83 }, { OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34 }]; } }
|
Now the dataSource is appended in view and Model. We can change the data into view and model through any events in the Controls.
Here we are going to bind a data dynamically through a button click event in both view and model.
Refer to the below code snippet
[app.component.html]
<ej-grid [allowPaging]="true" [allowSorting]="true" [(dataSource)]="gridData"> <e-columns> <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right"></e-column> <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column> <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column> <e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column> <e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column> </e-columns> </ej-grid> <button type="button" id="button" ej-button text="click button to append dataSource" (ejclick)="dataappend($event)"></button>
|
Refer to the below code snippet to append the data dynamically in a click event.
[app.component.ts]
import { Component } from '@angular/core';
@Component({ selector: 'ej-app', templateUrl: './app.component.html', }) export class AppComponent { public gridData: any; constructor() { this.gridData = [{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38 }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61 }, { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83 }, { OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34 }]; } dataappend(event){ this.gridData.push({ OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), Freight: 51.3}); } }
|
Refer to the below sample link with above code snippets.
Conclusion
I hope you enjoyed learning about the Way Databinding Property.
You can refer to our JavaScript feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
