Simple Example Of Table Listing Using Angular 13

This tutorial help to create table listing using angular 13 and HTTP module. We will fetch data from the mock-up rest service and bind it with an HTML table. The Angular 13 is the latest version of angular framework. So let’s start an Angular 13 Table Listing Tutorial With Example From Scratch.

I have already shared the grid tutorial of Add,Edit and Delete Example Using Ng2-smart With Angular 4 and ag-grid CRUD Example Using HTTP Rest Service In Angular 4/5.

Angular 13 Table Listing Tutorial With Example

We are using Angular 13 to create this tutorial, So we will install Angular CLI version 13. We will install angular 13 CLI using the below Command :

Install Angular 13

We will run the following command into the command line to install angular 13 CLI.
npm install -g @angular/cli

The -g command help to install the above package globally on your machine.

Create Scaffold Project Using Angular 13 CLI

The following command will create ‘angular-13-listing-example’ app using angular CLI.
ng new angular-13-listing-example
The above angular CLI command will generate the basic structure and scaffold of our Angular 7 app.

Create Models Into Angular 13

We will create employee.ts file src >> app >> models folders, If the model’s folder not exists then create a new one. We will create Employee models here, Please add the below code into this file.

//employee.ts
export interface Employee {
name: String,
salary: Number,
age : Number
}

Created Employee interface, which has a name, salary, and age field that will map with service data.

Service Helper File into Angular

We will create an injectable service file that will have all the rest services methods. First, Create a helper.service.ts file into scr >> app >> _service folder, If the _service folder does not exist then create a new one. We will create all third-party service methods here that will get data and return responses.

//helper.service.ts
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({providedIn: 'root'})
export class HelperService {

  url = "https://dummy.restapiexample.com/api/v1";
 
  constructor(private https: HttpClient) {
    
  }
  getEmployee() {
    return this.http.get(this.url+'/employees')
  }
}

You can replace URL filed value as per your rest API hostname.

Import Service And Modules Into Angular 13

We will import all modules and injectable helper service modules into the app module file. Open app.module.ts file and add the below code:

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelperService } from './_service/helper.service';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [HelperService],
  bootstrap: [AppComponent]
})

Get Data From Rest API in Angular

We will use the helper service method to get data from the rest API. We will send the results data to the component HTML file to display in the table. Now open the app.component.ts file and add the below code.

//app.component.ts
import { Component } from '@angular/core';
import { HelperService } from './_service/helper.service';
import {Employee} from './models/Employee'
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[HelperService]
})
export class AppComponent {
  title = 'angular-13-listing-example';
  employees : Employee[];

  constructor(public https: HttpClient, private helperService: HelperService){
  }

  ngOnInit(): void {
    this.getEmployee();
  }
  getEmployee() {
    this.helperService
    .getEmployee()
    .subscribe((data:Employee[]) => {
      console.log(data);
      this.employees = data;
    });
  }
}

As you can see above code, I have imported the HelperService service and called getEmployee method to get data. We have then called this method to initialize of app component.

Define HTML in Angular 13

We will define an HTML table and iterate on the records set. We are using ngFor directive to iterate records and bind with table row.

//app.component.html
<div style="margin: 50px;">
<div class="alert alert-info"><b>Angular 13 HTTP GET Data Using HTTP</b></div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{emp.employee_name}}</td>
<td>{{emp.employee_salary}}</td>
<td>{{emp.employee_age}}</td>
</tr>
</tbody>
</table>
</div>
</div>