Angular Spring Boot showing data in table

Here we will use Angular and Spring boot to show data in HTML table.

Spring boot

To start a spring project go to https://start.spring.io/

For this project we selected

Java 1.8
Spring Web
Spring Data JPA
MySQL Driver

Fig: Spring Initializer to start spring boot project

Click on generate to download spring boot project then extract then project zip file and move to your project location.

Eclipse IDE is used to develop spring boot project.

How to import maven project in Eclipse

Open Eclipse
Click on File
Click on import
On select import wizard select Maven
Click on existing maven Project
Click on next
Browse folder
Click on finish

Now maven project is imported to eclipse.

Updation of project is required for that follw this steps

Right click on project in project Explorer
Select Maven Option
Update Maven

ExampleApplication.java

package com.ebhor.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ExampleApplication {

	public static void main(String[] args) {
		SpringApplication.run(ExampleApplication.class, args);
	}

}

package com.ebhor.example;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

public class ExampleApplication {

public static void main(String[] args) {

SpringApplication.run(ExampleApplication.class, args);

}

POM.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.7.2</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.ebhor</groupId>
	<artifactId>mvc</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>mvc</name>
	<description>Spring MVC Example</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

</parent>

<groupId>com.ebhor</groupId>

<version>0.0.1-SNAPSHOT</version>

<description>Spring MVC Example</description>

<java.version>1.8</java.version>

</properties>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-jpa</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-tomcat</artifactId>

<scope>provided</scope>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

</dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<scope>runtime</scope>

</dependency>

</dependencies>

<build>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

</build>

</project>

Application.properties

Here we configured spring datasource to connect with MySql Database.

spring.datasource.url=jdbc:mysql://localhost:3306/ebhor
spring.datasource.username=root
spring.datasource.password=
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update
spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect

spring.datasource.url=jdbc:mysql://localhost:3306/ebhor

spring.datasource.username=root

spring.datasource.password=

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.jpa.hibernate.ddl-auto=update

spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect

EmployeeController.java

EmployeeController is used to fetch employee list from EmployeeService and send it to client using RestController.

@CrossOrigin(origins = “http://localhost:4200”) annotation is used to allow access this url to angular project.

package com.ebhor.example.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.ebhor.example.entity.Employee;
import com.ebhor.example.service.EmployeeService;
<pre class="theme:eclipse font:verdana toolbar:2
 show-plain:3 lang:xml decode:true"> 
@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class EmployeeController {
	@Autowired
	EmployeeService employeeService;
	@GetMapping("/")
	public Iterable<Employee> getEmployess() {
		return employeeService.getEmployees();
	}
}

package com.ebhor.example.controller;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.CrossOrigin;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import com.ebhor.example.entity.Employee;

import com.ebhor.example.service.EmployeeService;

<pre class="theme:eclipse font:verdana toolbar:2

show-plain:3 lang:xml decode:true">

@RestController

@CrossOrigin(origins = "http://localhost:4200")

public class EmployeeController {

@Autowired

EmployeeService employeeService;

@GetMapping("/")

public Iterable<Employee> getEmployess() {

return employeeService.getEmployees();

}

Employee.java

This is an Employee entity class which maps with database table employee.

package com.ebhor.example.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "employee")
public class Employee {

	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	@Column(name = "id")
	private int id;
	@Column(name = "name", nullable = false)
	private String name;
	@Column(name = "designation", nullable = false)
	private String designation;
	@Column(name = "mobileno", nullable = false)
	private String mobileNo;
	@Column(name = "mailid", nullable = false)
	private String mailId;
	@Column(name = "department", nullable = false)
	private String department;

	public Employee() {
	}

	public Employee(int id, String name, String designation, String mobileNo, String mailId, String department) {
		super();
		this.id = id;
		this.name = name;
		this.designation = designation;
		this.mobileNo = mobileNo;
		this.mailId = mailId;
		this.department = department;
	}

	@Override
	public String toString() {
		return "Employee [id=" + id + ", name=" + name + ", designation=" + designation + ", mobileNo=" + mobileNo
				+ ", mailId=" + mailId + ", department=" + department + "]";
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getDesignation() {
		return designation;
	}

	public void setDesignation(String designation) {
		this.designation = designation;
	}

	public String getMobileNo() {
		return mobileNo;
	}

	public void setMobileNo(String mobileNo) {
		this.mobileNo = mobileNo;
	}

	public String getMailId() {
		return mailId;
	}

	public void setMailId(String mailId) {
		this.mailId = mailId;
	}

	public String getDepartment() {
		return department;
	}

	public void setDepartment(String department) {
		this.department = department;
	}

}

package com.ebhor.example.entity;

import javax.persistence.Column;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

import javax.persistence.Table;

@Entity

@Table(name = "employee")

public class Employee {

@Id

@GeneratedValue(strategy = GenerationType.AUTO)

@Column(name = "id")

private int id;

@Column(name = "name", nullable = false)

private String name;

@Column(name = "designation", nullable = false)

private String designation;

@Column(name = "mobileno", nullable = false)

private String mobileNo;

@Column(name = "mailid", nullable = false)

private String mailId;

@Column(name = "department", nullable = false)

private String department;

public Employee() {

}

public Employee(int id, String name, String designation, String mobileNo, String mailId, String department) {

super();

this.id = id;

this.name = name;

this.designation = designation;

this.mobileNo = mobileNo;

this.mailId = mailId;

this.department = department;

}

@Override

public String toString() {

return "Employee [id=" + id + ", name=" + name + ", designation=" + designation + ", mobileNo=" + mobileNo

+ ", mailId=" + mailId + ", department=" + department + "]";

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getDesignation() {

return designation;

}

public void setDesignation(String designation) {

this.designation = designation;

}

public String getMobileNo() {

return mobileNo;

}

public void setMobileNo(String mobileNo) {

this.mobileNo = mobileNo;

}

public String getMailId() {

return mailId;

}

public void setMailId(String mailId) {

this.mailId = mailId;

}

public String getDepartment() {

return department;

}

public void setDepartment(String department) {

this.department = department;

}

EmployeeService.java

EmployeeServices fetch data from EmployeeDAO and pass to EmployeeController

package com.ebhor.example.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ebhor.example.dao.EmployeeDAO;
import com.ebhor.example.entity.Employee;
@Service
public class EmployeeService {
	@Autowired
	public EmployeeDAO employeeDAO;
	public Iterable<Employee> getEmployees() {
		return employeeDAO.findAll();
	}
}

package com.ebhor.example.service;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.ebhor.example.dao.EmployeeDAO;

import com.ebhor.example.entity.Employee;

@Service

public class EmployeeService {

@Autowired

public EmployeeDAO employeeDAO;

public Iterable<Employee> getEmployees() {

return employeeDAO.findAll();

}

EmployeeDAO.java

Interface EmployeeDAO extends to CrudRepository which provice access to database table.

package com.ebhor.example.dao;
import org.springframework.data.repository.CrudRepository;
import org.springframework.stereotype.Repository;
import com.ebhor.example.entity.Employee;
@Repository
public interface EmployeeDAO extends CrudRepository<Employee, Integer>{
}

package com.ebhor.example.dao;

import org.springframework.data.repository.CrudRepository;

import org.springframework.stereotype.Repository;

import com.ebhor.example.entity.Employee;

@Repository

public interface EmployeeDAO extends CrudRepository<Employee, Integer>{

}

To test our spring boot project you can call url using browser or Postman API

Angular Project

Visual studio code IDE is used to develop this project.

npm -v is 8.5.5
ng –version
Package and Version
@angular-devkit/architect 0.1303.7 (cli-only)
@angular-devkit/core 13.3.7 (cli-only)
@angular-devkit/schematics 13.3.7 (cli-only)
@schematics/angular 13.3.7 (cli-only)

Angular Commands

To create new project => ng new angularapp1
Generate service => ng g s employee
Start server => ng serve

index.html

Remove all existing body content.

add Bootstrap CDN in head section

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angularapp1</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

<!doctype html>

<head>

<title>Angularapp1</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

app.module.ts

Here HttpClientModule is added in imports.

import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';

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

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Employee.ts

This file contains employee interface that is having all fields of employee.

export interface Employee{
    id: number,
    name: string,
    designation:string,
    mobileNo:string,
    mailId:string,
    department:string
}

export interface Employee{

id: number,

name: string,

designation:string,

mobileNo:string,

mailId:string,

department:string

}

employee.service.ts

This file contains a method getEmployees() to get the employee data from specified url.

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import { Employee } from './employee';
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  private url = "http://localhost:8080/"
  constructor(private http: HttpClient) { }
  getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(this.url)
      .pipe(
        retry(2),
        catchError(this.handleError)
      );
  }
  private handleError(error: HttpErrorResponse) {
    if (error.status === 0) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong.
      console.error(
        `Backend returned code ${error.status}, body was: `, error.error);
    }
    // Return an observable with a user-facing error message.
    return throwError(() => new Error('Something bad happened; please try again later.'));
  }
}

import { HttpClient, HttpErrorResponse } from '@angular/common/http';

import { Injectable } from '@angular/core';

import { Observable, throwError } from 'rxjs';

import { catchError, retry } from 'rxjs/operators';

import { Employee } from './employee';

@Injectable({

providedIn: 'root'

})

export class EmployeeService {

private url = "http://localhost:8080/"

constructor(private http: HttpClient) { }

getEmployees(): Observable<Employee[]> {

return this.http.get<Employee[]>(this.url)

.pipe(

retry(2),

catchError(this.handleError)

);

}

private handleError(error: HttpErrorResponse) {

if (error.status === 0) {

// A client-side or network error occurred. Handle it accordingly.

console.error('An error occurred:', error.error);

} else {

// The backend returned an unsuccessful response code.

// The response body may contain clues as to what went wrong.

console.error(

`Backend returned code ${error.status}, body was: `, error.error);

}

// Return an observable with a user-facing error message.

return throwError(() => new Error('Something bad happened; please try again later.'));

}

app.component.ts

This fill access the EmployeeService class and get data of Employee to employess variable

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from './employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public employees: any;
  constructor(private _employeeService: EmployeeService) { }
  ngOnInit(): void {
    this.employees = this._employeeService.getEmployees()
      .subscribe(data => this.employees = data);
  }


}

import { Component, OnInit } from '@angular/core';

import { EmployeeService } from './employee.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

public employees: any;

constructor(private _employeeService: EmployeeService) { }

ngOnInit(): void {

this.employees = this._employeeService.getEmployees()

.subscribe(data => this.employees = data);

}

app.component.html:

This is HTML file to show employee data

ngFor is used to loop employees and interpolation is used to show data or employee

<div class="container mt-3">
    <h2>Employee details are</h2>
    <div *ngif="employees?.length>0">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Designation</th>
                    <th>MobileNo</th>
                    <th>MailId</th>
                    <th>Department</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngfor="let employee of employees">
                    <td>{{employee.id}}</td>
                    <td>{{employee.name}}</td>
                    <td>{{employee.designation}}</td>
                    <td>{{employee.mobileNo}}</td>
                    <td>{{employee.mailId}}</td>
                    <td>{{employee.department}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<h2>Employee details are</h2>

<thead>

<tr>

<th>Designation</th>

<th>MobileNo</th>

<th>MailId</th>

<th>Department</th>

</tr>

</thead>

<tbody>

<td>{{employee.id}}</td>

<td>{{employee.name}}</td>

<td>{{employee.designation}}</td>

<td>{{employee.mobileNo}}</td>

<td>{{employee.mailId}}</td>

<td>{{employee.department}}</td>

</tr>

</tbody>

</table>

</div>

Afterexecuting you will get following output.

Angular Spring boot Showing data in table — Fig: showing Employee data using spring boot and angular

Hope you understand how to use Angular and Spring boot to show data in HTML table..

Angularjs select : ng-repeat ng option default multiple select selected value

Spring boot

How to import maven project in Eclipse

Angular Project

Angular Commands

Read More