part-5.3

src/app/dtcservice/user.service.ts

@@ -1,9 +1,21 @@
 import { Injectable } from '@angular/core';
+import {User} from '../dtcservice/user';
+import { Observable, of } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
 
 @Injectable({
   providedIn: 'root'
 })
 export class UserService {
+  constructor(private http: HttpClient) { }
+  private apihost = 'http://localhost:8080';
+
+  getUsers(): Observable<User[]> {
+    return this.http.get<User[]>(this.apihost+'/user');
+  }
 
-  constructor() { }
 }

src/app/module/module-user/user-list/user-list.component.html

@@ -1 +1,6 @@
-<p>user-list works!</p>
+<ul>
+    <li class="userlist" *ngFor="let user of users">
+        <h5>{{user.username}}</h5>
+       Fullname : {{user.fullname}}
+    </li>
+</ul>

src/app/module/module-user/user-list/user-list.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {UserService} from "../../../dtcservice/user.service"
+import {User} from "../../../dtcservice/user"
 
 @Component({
   selector: 'app-user-list',
@@ -7,9 +9,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class UserListComponent implements OnInit {
 
-  constructor() { }
+  constructor(private userService:UserService) { }
+  users:User[]
+
+  getUsers():void{
+    this.userService.getUsers()
+    .subscribe(users => this.users = users);
+  }
 
   ngOnInit() {
+    this.getUsers()
   }
 
 }