Simple Example Of Table Listing Using Angular7

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

I have already shared 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 7 Table Listing Tutorial With Example

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

Install Angular 7

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

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

Create Scaffold Project Using Angular 7 CLI

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

Create Models Into Angular 7

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

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

export interface Employee {

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

Service Helper File into Angular

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

//helper.service.ts import { Injectable } from ‘@angular/core’; import {HttpClient} from ‘@angular/common/http’; @Injectable({providedIn: ‘root’}) export class HelperService { url = “http://dummy.restapiexample.com/api/v1"; constructor(private http: HttpClient) { } getEmployee() { return this.http.get(this.url+’/employees’) } }

import { Injectable } from ‘@angular/core’;

import {HttpClient} from ‘@angular/common/http’;

@Injectable({providedIn: ‘root’})

export class HelperService {

url = “http://dummy.restapiexample.com/api/v1";

constructor(private http: HttpClient) {

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 7

We will import all modules and injectable helper service module into app module file.Open app.module.ts file and add 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] })

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’;

providers: [HelperService],

bootstrap: [AppComponent]

Get Data From Rest API in Angular

We will use helper service method to get data from rest api. We will send that results data to component html file to display into table.Now open app.component.ts file and add 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-7-listing-example’; employees : Employee[]; constructor(public http: HttpClient, private helperService: HelperService){ } ngOnInit(): void { this.getEmployee(); } getEmployee() { this.helperService .getEmployee() .subscribe((data:Employee[]) => { console.log(data); this.employees = data; }); } }

import { Component } from ‘@angular/core’;

import { HelperService } from ‘./_service/helper.service’;

import {Employee} from ‘./models/Employee’

import {HttpClient} from ‘@angular/common/http’;

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.css’],

providers:[HelperService]

export class AppComponent {

title = ‘angular-7-listing-example’;

constructor(public http: HttpClient, private helperService: HelperService){

.subscribe((data:Employee[]) => {

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

Define HTML in Angular 7

We will define html table and iterate on 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 7 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 *ngFor=”let emp of employees”> <td>{{emp.employee_name}}</td> <td>{{emp.employee_salary}}</td> <td>{{emp.employee_age}}</td> </tr> </tbody> </table> </div> </div>

<div style=”margin:50px;”>

<div class=”alert alert-info”><b>Angular 7 HTTP GET Data Using HTTP</b></div>

<div class=”table-responsive”>

<tr *ngFor=”let emp of employees”>

<td>{{emp.employee_name}}</td>

<td>{{emp.employee_salary}}</td>

<td>{{emp.employee_age}}</td>


Originally published at www.js-tutorials.com on November 29, 2018.