id |   name   | age |  username
-------+----------+----+---------------
     1 | P        | 38  | user1
     2 | Q        | 38  | user2
     3 | R        | 38  | user3

const express = require('express'),
pg = require("pg");

const app = express();

const config = {
    user: 'appuser',
    database: 'users',
    password: '12345',
    port: 5432
  };

const pool = new pg.Pool(config);

app.get('/users', (req, res, next) => {
    pool.connect(function (err, client, done) {
        if (err) {
            done();
            console.log("Can not connect to the DB" + err);
        }
        client.query('SELECT * FROM Users ORDER BY id', function (err,
result) {
            done();
            if (err) {
                console.log(err);
                res.status(400).send(err);
            }
            //res.status(200).send(result.rows[0]);
            return res.status(200).json(result.rows);
        })
    })
 });

app.listen(4000, function () {
    console.log('Server is running.. on Port 4000/users');
});

export interface User {
    id: number;
    name: string;
    age: number;
    username: string;
}

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse  } from
'@angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';

import { User } from './user';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "http://localhost:4000/users";

@Injectable({
  providedIn: 'root' //the service is available to the entire app
})

export class UserService {

  constructor(private http: HttpClient) { }

  getUsers (): Observable<User[]> {
    return this.http.get<User[]>(apiUrl)
      .pipe(catchError(this.handleError('getUser', [])));
  }

  getUser(id: number): Observable<User> {
    const url = `${apiUrl}/${id}`;
    return this.http.get<User>(apiUrl).pipe(
      tap(_ => console.log(`fetched User id=${id}`)),
      catchError(this.handleError<User>(`getUser id=${id}`))
    );
  }
}

import { Component, OnInit } from '@angular/core';
import { User } from '../user';
import { UserService } from '../user.service';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  users: User[];
constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUsers().subscribe(res => {
      this.data = res;
      //console.log(this.data);
      this.isLoadingResults = false;
    }, err => {
      console.log(err);
      this.isLoadingResults = false;
    });
}
getUsers(): void {
    this.userService.getUsers().subscribe(
    users => this.users = users);
  }

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>UserName</th>
    </tr>
  </thead>
  <tbody *ngFor="let user of users">
      <tr>
          <td>{{user.id}}</td>
          </a>
          <td>{{user.name}}</td>
          <td>{{user.age}}</td>
          <td>{{user.username}}</td>
      </tr>
  </tbody>
</table>