UserService angular

// user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface User {
userId: number;
name: string;
email: string;
role: string;
}

@Injectable({
providedIn: 'root',
})
export class UserService {
private apiUrl = 'http://localhost:8080/api/users'; // Backend API

constructor(private http: HttpClient) {}

getAllUsers(): Observable<User[]> {
return this.http.get<User[]>(${this.apiUrl}/all);
}

getUserById(userId: number): Observable<User> {
return this.http.get<User>(${this.apiUrl}/${userId});
}

updateUser(userId: number, user: User): Observable<any> {
return this.http.put(${this.apiUrl}/${userId}, user);
}

deleteUser(userId: number): Observable<any> {
return this.http.delete(${this.apiUrl}/${userId});
}

searchUser(keyword: string): Observable<User[]> {
return this.http.get<User[]>(${this.apiUrl}/search?keyword=${keyword});
}
}

// user-list.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService, User } from '../../services/user.service';

@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
users: User[] = [];

constructor(private userService: UserService) {}

ngOnInit() {
this.loadUsers();
}

loadUsers() {
this.userService.getAllUsers().subscribe((data) => {
this.users = data;
});
}

deleteUser(userId: number) {
if (confirm('Are you sure you want to delete this user?')) {
this.userService.deleteUser(userId).subscribe(() => {
this.loadUsers();
});
}
}
}

// user-list.component.html

<h2>User List</h2> <table> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Role</th> <th>Actions</th> </tr> <tr *ngFor="let user of users"> <td>{{ user.userId }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> <td>{{ user.role }}</td> <td> <button (click)="deleteUser(user.userId)">Delete</button> <a [routerLink]="['/user/edit', user.userId]">Edit</a> </td> </tr> </table>

// user-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserListComponent } from './components/user-list/user-list.component';
import { UserEditComponent } from './components/user-edit/user-edit.component';

const routes: Routes = [
{ path: 'list', component: UserListComponent },
{ path: 'edit/:id', component: UserEditComponent },
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UserRoutingModule {}

//user.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserRoutingModule } from './user-routing.module';
import { UserListComponent } from './components/user-list/user-list.component';
import { UserEditComponent } from './components/user-edit/user-edit.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [UserListComponent, UserEditComponent],
imports: [CommonModule, UserRoutingModule, HttpClientModule],
})
export class UserModule {}