Tutusfunny

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

ng g c employeetable

in the employeetable.component.html  paste the following code.

employeetable.component.html

<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

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