Site icon RemoteStack

Angular 14 Dynamic HTML Table Tutorial Example

remotestack

This is a comprehensive tutorial on creating a dynamic HTML Table with a predefined *ngFor directive in Angular.

This tutorial consists of two sub-steps, and here is the assortment:

  1. First, get the table data from the server.
  2. Second, show the data in the Table with the help of ngFor.

The ngFor directive is a handy option for displaying data in a table.

I will enumerate all the steps required to build a dynamic HTML table in Angular.

We need to set up an Angular project using Angular CLI.

Creating Angular Project

Install the latest version of Angular CLI.

npm install -g @angular/cli@latest

Create angular app.

ng new angular-table-example

Move to the project root:

cd angular-table-example

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Import & Register HttpClient Module

Import and register HttpClientModule in app.module.ts file, It will help us making the HTTP GET Request to get the data from the server.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
   ]
})

Fetch Data with Angular Service

We need to create an Angular Service to fetch the data by making the HTTP request.

Generate angular service using below command.

ng g s shared/Data

Add the following code in data.service.ts file.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class DataService {

  private api = "https://myapi.com";
  
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  constructor(private httpClient: HttpClient) { }

  fetchData(): Observable<any[]> {
    return this.httpClient.get<any[]>(this.api+ '/students/');
  }

}

Creating Angular Table Component

Execute command to generate an angular component where all configuration goes.

ng g c DynamicTable

Building Angular 13 Dynamic Table

Let’s use the service and fetch the data using angular service and inject in the component template.

Place the code in dataable.component.ts file.

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

@Component({
  selector: 'datatable-root',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})

export class DataTableComponent implements OnInit {

  Items= [];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.get().subscribe((res: any[])=>{
      this.Items= res;
    })  
  }

}

Next up, we are displaying the data in HTML table data using the ngFor directive; it will iterate over every item and display the data in Table dynamically.

Add the code in dynamictable.component.html template.

<div>

   <h2>Angular Dynamic HTML Table Example</h2>

   <table>
      <thead>
         <tr>
            <th>#ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
         </tr>
      </thead>
      <tbody>
         <tr *ngFor="let item of Items">
            <th>{{ item.id }}</th>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.phone}}</td>
            <td>{{ item.address }}</td>
         </tr>
      </tbody>
   </table>
</div>

The Bottom Line

You can run ng serve --open command from your terminal to start the app in the browser.

So far, we have seen how to use the Angular ngFor directive to loop over the student’s data and display dynamically in an HTML table in Angular application.

Also, we learned how to fetch data using angular service from a remote server.

So this was it, the Angular HTML Table example tutorial is over.

Exit mobile version