Angular, a popular web application framework, provides a powerful set of tools for building dynamic and interactive user interfaces.

One common requirement in many applications is the need to display data in a tabular format. In this tutorial, we’ll walk through the process of creating a data table component in Angular.

Prerequisites

Before we begin, ensure that you have the following installed on your machine:

  • Node.js and npm (Node Package Manager)
  • Angular CLI (Command Line Interface)

You can install Angular CLI using the following command:

npm install -g @angular/cli

Step 1: Set Up a New Angular Project

Start by creating a new Angular project using the Angular CLI.

Open your terminal and run the following commands:

ng new angular-data-table
cd angular-data-table

Step 2: Install Angular Material

Angular Material is a UI component library for Angular that includes a data table component.

Install it by running:

ng add @angular/material

Follow the prompts to choose a theme and other options.

Step 3: Create a Data Service

Create a service to fetch and manage the data.

Generate a service using the following command:

ng generate service data

Implement the service in src/app/data[EXCLUDED_PERIOD]service[EXCLUDED_PERIOD]ts:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data = [
    { id: 1, name: 'John Doe', age: 25 },
    { id: 2, name: 'Jane Smith', age: 30 },
    // Add more data as needed
  ];

  getData(): Observable<any[]> {
    return of(this.data);
  }
}

Step 4: Create a Data Table Component

Generate a new component for the data table:

ng generate component data-table

In the data-table component (src/app/data-table/data-table[EXCLUDED_PERIOD]component[EXCLUDED_PERIOD]ts), implement the following:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  dataSource: any[];

  displayedColumns: string[] = ['id', 'name', 'age'];

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.dataService.getData().subscribe(data => {
      this.dataSource = data;
    });
  }
}

Step 5: Design the Data Table Template

Edit the template (src/app/data-table/data-table[EXCLUDED_PERIOD]component[EXCLUDED_PERIOD]html) to include the Angular Material data table:

<table mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let row">{{row.id}}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let row">{{row.name}}</td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef>Age</th>
    <td mat-cell *matCellDef="let row">{{row.age}}</td>
  </ng-container>

  <!-- Add more columns as needed -->

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Step 6: Integrate the Data Table Component

Include the data table component in the main app[EXCLUDED_PERIOD]component[EXCLUDED_PERIOD]html:

<app-data-table></app-data-table>

Step 7: Run the Application

Start the development server to see your data table in action:

ng serve

Visit http://localhost:4200/ in your browser to view the data table displaying the sample data.

Congratulations! You’ve successfully created a basic data table component in Angular using Angular Material.

You can further enhance it by adding features such as sorting, pagination, and filtering based on your application requirements.

Similar Posts