How do I implement data binding in Angular Material tables?

How do I implement data binding in Angular Material tables?

To implement data binding in Angular Material tables, you can use the MatTableDataSource class to manage your data.

Can you show me a code example?

Sure! Here's a simple example:

import { MatTableDataSource } from '@angular/material/table';

export class MyComponent {
  displayedColumns: string[] = ['name', 'age', 'address'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
}

What is ELEMENT_DATA in this context?

ELEMENT_DATA is an array of objects that contains the data you want to display in the table. For example:

const ELEMENT_DATA = [
  { name: 'John', age: 30, address: '123 Main St' },
  { name: 'Jane', age: 25, address: '456 Elm St' }
];

How can I add sorting and pagination to the table?

You can add sorting by using the MatSort directive and pagination with MatPaginator. You'll need to set them up in your component.