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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <?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> |
Application.properties
Here we configured spring datasource to connect with MySql Database.
1 2 3 4 5 6 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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; @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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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.
1 2 3 4 5 6 7 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <app-root></app-root> </body> </html> |
app.module.ts
Here HttpClientModule
is added in imports.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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.
1 2 3 4 5 6 7 8 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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> |
Afterexecuting you will get following output.

Hope you understand how to use Angular and Spring boot to show data in HTML table..
Read More
Angularjs select : ng-repeat ng option default multiple select selected value