ArticleZip > How To Add Data Dynamically To Mat Table Datasource

How To Add Data Dynamically To Mat Table Datasource

Adding data dynamically to a mat table datasource in Angular can be a handy skill to have when working on web applications. In this article, we'll walk you through the steps on how to achieve this effectively.

Firstly, ensure you have the necessary dependencies installed in your Angular project. You will need to have the Angular Material module and CDK (Component Dev Kit) installed. If you haven't already done so, you can add them to your project by running the following commands:

Bash

npm install @angular/material @angular/cdk

Next, you need to import the MatTableDataSource from '@angular/material/table' in your component where you want to add data dynamically. This will allow you to bind your data to the mat-table component seamlessly. Here is an example of how you can import and use MatTableDataSource in your component:

Typescript

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

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
})
export class YourComponent {
  dataSource = new MatTableDataSource();

  constructor() {
    // Add initial data to your data source
    this.dataSource.data = [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
    ];
  }

  // Function to add data dynamically to the data source
  addData() {
    const newData = { id: 3, name: 'Alice Johnson' };
    this.dataSource.data = [...this.dataSource.data, newData];
  }
}

In this code snippet, we have created a MatTableDataSource instance and initialized it with some initial data. The `addData` function demonstrates how you can add data dynamically to the datasource by creating a new object and spreading the existing data along with the new one.

To display the data in your mat-table in the HTML template, you can use the following code snippet:

Html

<table>
  
    <th>ID</th>
    <td>{{element.id}}</td>
  
  
    <th>Name</th>
    <td>{{element.name}}</td>
  

  <tr></tr>
  <tr></tr>
</table>

In the above HTML snippet, we define the columns for our mat-table and bind the datasource we defined in our component to the table using `[dataSource]="dataSource"`. This will ensure that the data is displayed dynamically as it gets updated in the datasource.

By following these steps, you can easily add data dynamically to the MatTableDataSource in Angular and display it in your mat-table component. This feature is particularly useful when working with data that may change or grow over time in your application.

Related posts:

×