Added Update Delete Operations

src/app/home/home.component.css

 button{
-  background: rgb(1, 29, 51);
+  background: rgb(247, 250, 246);
   border-color: transparent;
-  color: rosybrown ;
+  color: rgb(56, 32, 32) ;
   cursor: pointer;
 }
 #customers {
@@ -13,11 +13,12 @@ button{
 #customers td, #customers th {
   border: 1px solid #ddd;
   padding: 8px;
+  color: whitesmoke;;
 }
 
-#customers tr:nth-child(even){background-color: #f2f2f2;}
+#customers tr:nth-child{background-color: #f2f2f2;}
 
-#customers tr:hover {background-color: #ddd;}
+#customers tr:hover {background-color: royalblue;}
 
 #customers th {
   padding-top: 12px;

src/app/home/home.component.html

@@ -4,7 +4,7 @@
   </button>
 </p>
 <div style="text-align:center">
-  <h1>
+  <h1 style="color: #FFF;">
     Welcome {{name}}
   </h1>
 </div>
@@ -18,6 +18,7 @@
       <th>Password</th>
       <th>Role</th>
       <th>Description</th>
+      <th>ID</th>
       <th>Action</th>
     </tr>
 
@@ -28,8 +29,9 @@
         <td>{{item.password}}</td>
         <td>{{item.role}}</td>
         <td>{{item.description}}</td>
+        <td>{{item.id}}</td>
         <td><a (click)="getData(item)" ><i class='fas fa-edit' style='font-size:24px'></i> </a> &nbsp;
-          <a (click)="deleteData(item)" ><i class='fas fa-trash-alt' style='font-size:24px'></i></a>
+          <a (click)="deleteData(item.id)" ><i class='fas fa-trash-alt' style='font-size:24px'></i></a>
         </td>
       </tr>
     </ng-container>
@@ -41,6 +43,7 @@
   <h2 class="login-header">Update</h2>
   <form [formGroup]="userUpdateForm" class="login-container" (ngSubmit)="update()">
 
+    
     <p [ngClass]="{ 'has-error': isSubmitted && formControls.userId.errors }" >
       <input type="text" placeholder="userId" formControlName="userId" ngModel="{{userInfo.userId}}" disabled>
     </p>

src/app/home/home.component.ts

@@ -20,6 +20,11 @@ export class HomeComponent implements OnInit {
   showMsg = false;
   userUpdateForm: FormGroup;
   isSubmitted: boolean;
+  code:any;
+  showModal: boolean = false;
+  successMsg: any;
+  taskTitle: any;
+  deleteCheckModal: boolean = false;
   constructor(private authService: AuthService, private router: Router, private formBuilder: FormBuilder) { }
 
   ngOnInit() {
@@ -46,8 +51,20 @@ export class HomeComponent implements OnInit {
     this.showData = true;
     this.userInfo = data;
   }
-  deleteData(data) {
-    console.log(data);
+  taskId:any
+  dat:any = {};
+  deleteData(id): void {
+    console.log(id);
+    this.taskId = id;
+    this.authService.deleteData(this.taskId).subscribe(dat => {
+
+        this.showModal = true;
+        window.location.reload();
+    },
+    error => {
+      console.log("error", error);
+     
+    });
   }
   logout() {
     this.authService.logout();

src/app/models/user.ts

 export interface User {
+  id: string;
   userId: bigint;
   email: string;
   password: string;

src/app/services/auth.service.ts

@@ -25,8 +25,8 @@ export class AuthService {
     return this.http.get(this.baseUrl + 'users');
   }
 
-  public deleteData(): Observable<any> {
-    return this.http.get(this.baseUrl + 'users');
+  public deleteData(taskId): Observable<any> {
+    return this.http.delete(this.baseUrl + 'delete/'+taskId);
   }
   public isLoggedIn() {
     return localStorage.getItem('token') !== null;
@@ -38,7 +38,7 @@ export class AuthService {
   }
 
   public update(userInfo: User): Observable<any> {
-    return this.http.post(this.baseUrl + 'update', userInfo);
+    return this.http.put(this.baseUrl + 'update', userInfo);
   }
 
 }