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.
