Adding a studentsGradeDto example and connecting to Frontend

frontend/kaiser/angular.json

@@ -69,6 +69,10 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-nodejs-example:build",
+            "proxyConfig": "prox.conf.json"
+          },
           "configurations": {
             "production": {
               "browserTarget": "kaiser:build:production"

frontend/kaiser/prox.conf.json

@@ -0,0 +1,8 @@
+{
+    "/api": {
+      "target": "http://localhost:8080",
+      "secure": false,
+      "changeOrigin": true,
+      "pathRewrite": {"^/api" : ""}
+    }
+  } 

frontend/kaiser/src/app/app-routing.module.ts

@@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 import { AnimeComponent } from './anime/anime.component';
 import { BookDataComponent } from './book-data/book-data.component';
 import { MovieComponent } from './movie/movie.component';
+import { StudentsGradeComponent } from './studentsGrade/studentsGrade.component';
 
 const routes: Routes = [
   { path: 'books', component: BookDataComponent },
   { path: 'anime', component: AnimeComponent },
-  { path: 'movie', component: MovieComponent}
+  { path: 'movie', component: MovieComponent},
+  { path: 'studentsGrade', component: StudentsGradeComponent}
 ];
 
 @NgModule({

frontend/kaiser/src/app/app.module.ts

@@ -9,13 +9,15 @@ import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { AnimeComponent } from './anime/anime.component';
 import { MovieComponent } from './movie/movie.component';
+import { StudentsGradeComponent } from './studentsGrade/studentsGrade.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     BookDataComponent,
     AnimeComponent,
-    MovieComponent
+    MovieComponent,
+    StudentsGradeComponent
   ],
   imports: [
     BrowserModule,

frontend/kaiser/src/app/service/studentsGrade.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+export interface StudentsGradeDto {
+  name: String;
+  email: String;
+  gradeId: number;
+  homeGradeTeacherId: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StudentsGradeService {
+
+  constructor(private http: HttpClient) {}
+
+  rootURL = '/api';
+
+  //Get
+  getStudentsDtoList() {
+    return this.http.get(this.rootURL + '/getStudentDtoList');
+  }
+
+
+  //Post
+//   addUser(user: any, id: number) {
+// 	user.id = id;
+// 	return this.http.post(this.rootURL + '/user', user);
+//   }
+
+}

frontend/kaiser/src/app/studentsGrade/studentsGrade.component.html

@@ -0,0 +1,19 @@
+<p>STUDENTS GRADE TIME</p>
+<p-table [value]="studentsGradeDto">
+    <ng-template pTemplate="header">
+      <tr>
+        <th>Email</th>
+        <th>Name</th>
+        <th>Grade ID</th>
+        <th>homeGradeTeacherId</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-sg>
+      <tr>
+        <td>{{sg.email}}</td>
+        <td>{{sg.name}}</td>
+        <td>{{sg.gradeId}}</td>
+        <td>{{sg.homeGradeTeacherId}}</td>
+      </tr>
+    </ng-template>
+  </p-table>

frontend/kaiser/src/app/studentsGrade/studentsGrade.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { takeUntil } from 'rxjs';
+import { StudentsGradeDto, StudentsGradeService } from '../service/studentsGrade.service';
+
+@Component({
+  selector: 'app-studentsGrade',
+  templateUrl: './studentsGrade.component.html',
+  styleUrls: ['./studentsGrade.component.css']
+})
+export class StudentsGradeComponent implements OnInit {
+
+  // destroy$: Subject<boolean> = new Subject<boolean>(); 
+
+  studentsGradeDto: StudentsGradeDto[];
+
+  constructor(private studentsGradeService: StudentsGradeService) { }
+
+  ngOnInit(): void {
+    // this.studentsGradeDto = this.studentsGradeService.getStudentsDtoList();
+      // then(studentsGradeServiceResult => this.studentsGradeDto = studentsGradeServiceResult);
+      this.studentsGradeDto = [];
+      this.getStudentsGradeDto();
+  }
+
+  getStudentsGradeDto() {
+    this.studentsGradeService.getStudentsDtoList().subscribe((studentsGradeServiceResult: any) => {
+		let stud = studentsGradeServiceResult;
+
+    studentsGradeServiceResult.forEach((element: { email: string; name: string; gradeId: number; homeGradeTeacherId: number; }) => {
+      let sgd = {
+        email: "",
+        name: '',
+        gradeId: 0,
+        homeGradeTeacherId: 0,
+      };
+      sgd.email = element.email;
+      sgd.name = element.name;
+      sgd.gradeId = element.gradeId;
+      sgd.homeGradeTeacherId = element.homeGradeTeacherId;
+      this.studentsGradeDto.push(sgd);
+    });
+
+    });
+  }
+
+}