This Angular and Spring boot tutorial will teach you how to view the records using Restful API.
First you have to run the Back-end Spring Boot Application
Study RestFul Api How to Works for beginners here.
if you not watch my angular tutorial please watch them then only you will clear of angular link here.
After That Create a new component in Angular
1 | ng g c employeetable |
in the employeetable.component.html paste the following code.
employeetable.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <table class="table"> <thead> <tr> <th scope="col">Employee Name</th> <th scope="col">Address</th> <th scope="col">Salary USD</th> </tr> </thead> <tbody> <h1 *ngIf="!isResultLoaded">Loading.................</h1> <tr *ngFor="let EmployeeItem of EmployeeArray"> <td>{{EmployeeItem.employeeName | uppercase}}</td> <td>{{EmployeeItem.employeeAddress }}</td> <td>{{EmployeeItem.employeeSalary | currency:'USD'}}</td> </tr> </tbody> </table> |
employeetable.component.ts
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 | import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-employeetable', templateUrl: './employeetable.component.html', styleUrls: ['./employeetable.component.scss'] }) export class EmployeetableComponent implements OnInit { EmployeeArray : any[] = []; isResultLoaded = false; constructor(private http: HttpClient) { this.getAllEmployee(); } ngOnInit(): void { this.getAllEmployee(); } getAllEmployee() { this.http.get("http://localhost:8088/api/v1/employee/get-all-employees").subscribe((resultData: any)=> { this.isResultLoaded = true; console.log(resultData); this.EmployeeArray = resultData; }); } } |
i have attached the video link below. which will do this tutorials step by step
