Angular2 has been my latest exploration in solving a unique data binding challenge.
In my UI, I've presented a javascript array of objects like a database recordset in an HTML table. Each row contains menus and inputs allowing users to modify the recordset. The workflow involves loading a recordset from an external database, making changes in the UI, and committing edits back to the database.
Here's a snippet of typescript code for the data table component:
@Component({
selector: 'employee_table',
template: `
<h2>{{ title }}</h2>
<table>
... (omitted for brevity)
<td class="txt_btn dr_toggle_btn"
(click)="drToggle($event)">{{ee.show_direct && '-' || '+'}}</td>
<td class="txt_btn desc_toggle_btn">{{ee.show_descendants && '--' || '++'}}</td>
... (omitted for brevity)
<table>
<span class="table_return">Back to Top</span>
`,
providers: [EmployeeTableService],
directives: [AutoGrowDirective]
})
export class EmployeeTableComponent{
title: string = "Employee Data";
ee_data;
constructor(employeeTableService: EmployeeTableService){
this.ee_data = employeeTableService.getData();
}
drToggle(event){
// functionality here
}
}
I'm facing difficulty using the event listener defined in the template to pass a handle for the JavaScript object to `drToggle()`.
My goal is to expose the underlying JavaScript array (`ee_data`) to a function that edits the recordset, letting Angular handle the HTML updates automatically.
Currently, all I can do is pass the `$event` keyword. Although I could go through `event.target` to find necessary information about the corresponding record in the JavaScript object, it seems quite indirect.
Is there a way I can directly pass the iterative variable `#ee`, used in building the HTML table from the JavaScript array, to my event listener?