Edit and Delete Icon added

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

src/app/app.module.ts

@@ -10,6 +10,8 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {CoreModule} from "./core/core.module";
 import {SharedModule} from "./shared/shared.module";
 import {HttpClient, HttpClientModule} from "@angular/common/http";
+import { MatIconModule } from '@angular/material/icon';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -31,6 +33,9 @@ import {HttpClient, HttpClientModule} from "@angular/common/http";
       {path: '**', redirectTo: '', pathMatch: 'full' },
     ]),
     SharedModule,
+    MatIconModule,
+    FormsModule,
+
   ],
   providers: [HttpClient],
   bootstrap: [AppComponent]

src/app/core/service/user/user.service.ts

@@ -3,15 +3,40 @@ import {HttpClient} from "@angular/common/http";
 import {User, UserState} from "../../store/user/user.state";
 import {Observable} from "rxjs";
 import {AppComponent} from "../../../app.component";
+import { environment } from '../../../../environments/environment';
 
 @Injectable({
   providedIn: 'root'
 })
 export class UserService {
 
+  rowData:any;
+  baseUrl = environment.backend
+
   constructor(private httpClient: HttpClient) {}
 
   retrieve(): Observable<User[]> {
     return this.httpClient.post<User[]>(AppComponent.api.user.retrieve, {});
   }
+
+  createUser(firstName:String, middleName:String, lastName:String, phone:String):Observable<User>{
+      return  this.httpClient.post<User>(this.baseUrl+'/user/create',{
+        "firstName":firstName,
+        "middleName":middleName,
+        "lastName":lastName,
+        "phoneNumber":phone       
+      });
+  }
+
+  update(id:String,firstName:String, middleName:String, lastName:String, phone:String):Observable<User>{
+    return this.httpClient.patch<User>(this.baseUrl+'/update/${id}',{
+      "firstName":firstName,
+      "middleName":middleName,
+      "lastName":lastName,
+      "phoneNumber":phone 
+
+    });
+  }
+
+
 }

src/app/user/user-form/user-form.component.html

@@ -4,15 +4,15 @@
 <div class="form-container">
   <mat-form-field appearance="fill">
     <mat-label>First Name</mat-label>
-    <input matInput>
+    <input [(ngModel)]="firstName" [value]="firstName"  matInput>
   </mat-form-field>
   <mat-form-field appearance="fill">
     <mat-label>Middle Name</mat-label>
-    <input matInput>
+    <input [(ngModel)]="middleName" [value]="middleName" matInput>
   </mat-form-field>
   <mat-form-field appearance="fill">
     <mat-label>Last Name</mat-label>
-    <input matInput>
+    <input [(ngModel)]="lastName" [value]="lastName" matInput>
   </mat-form-field>
   <div class="button-container">
     <button mat-raised-button color="primary">

src/app/user/user-form/user-form.component.ts

@@ -1,14 +1,24 @@
 import { Component, OnInit } from '@angular/core';
+import { UserService } from 'src/app/core/service/user/user.service';
 
 @Component({
   templateUrl: './user-form.component.html',
   styleUrls: ['./user-form.component.scss']
 })
 export class UserFormComponent implements OnInit {
 
-  constructor() { }
+  firstName:String ='';
+  lastName:String ='';
+  middleName:String ='';
+
+  rowData:any;
+  constructor(private userService:UserService) { }
 
   ngOnInit(): void {
+    var obj =this.userService.rowData;
+    this.firstName=obj['firstName'];
+    this.lastName=obj['lastName'];
+    this.middleName=obj['middleName'];
   }
 
 }

src/app/user/user-search/user-search.component.html

@@ -19,6 +19,16 @@
       <th mat-header-cell *matHeaderCellDef mat-sort-header>Updated</th>
       <td mat-cell *matCellDef="let i">{{ i.updated }}</td>
     </ng-container>
+    <ng-container matColumnDef="edit">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Edit</th>
+      <td mat-cell *matCellDef="let i">
+        <button (click)="editRecord(i)" mat-icon-button ><mat-icon>edit</mat-icon></button></td>
+    </ng-container>
+
+    <ng-container matColumnDef="delete">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Delete</th>
+      <td mat-cell *matCellDef="let i"><button mat-icon-button ><mat-icon>delete</mat-icon></button></td>
+    </ng-container>
 
     <!-- Print Fields -->
     <tr mat-header-row *matHeaderRowDef="tableFields"></tr>

src/app/user/user-search/user-search.component.ts

@@ -6,21 +6,23 @@ import {MatTableDataSource} from "@angular/material/table";
 import {MatSort} from "@angular/material/sort";
 import {MatPaginator} from "@angular/material/paginator";
 import {filter, takeUntil} from "rxjs/operators";
+import {UserService} from "../../core/service/user/user.service";
+import { Router } from '@angular/router';
 
 @Component({
   templateUrl: './user-search.component.html',
   styleUrls: ['./user-search.component.scss']
 })
 export class UserSearchComponent implements AfterViewInit, OnDestroy, OnInit {
 
-  constructor(private userFacade: UserFacade) {}
+  constructor(private userFacade: UserFacade, private userSrvice: UserService, private router: Router) {}
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
 
   destroyed$ = new Subject<void>();
   state: UserState | undefined;
-  tableFields: string[] = ['name', 'updated'];
+  tableFields: string[] = ['name', 'updated','edit','delete'];
   tableSource!: MatTableDataSource<User>;
 
   ngAfterViewInit(): void {
@@ -51,4 +53,11 @@ export class UserSearchComponent implements AfterViewInit, OnDestroy, OnInit {
     const filterValue = (event.target as HTMLInputElement).value;
     this.tableSource.filter = filterValue.trim().toLowerCase();
   }
+
+  editRecord(rowData:any){
+
+    this.userSrvice.rowData=rowData;
+    this.router.navigate(['/user/form'])
+
+  }
 }