READ: Display User List in Angular

In this Tutorial, I will show you display a User List in Angular using HttpClient

In the User List HTML file

<div class="d-flex justify-content-between mb-3">
  <h3>User List</h3>
  <a class="btn btn-primary" routerLink="/add-user">Add User</a>
</div>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Salary</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{user.id}}</td>
      <td>{{user.name}}</td>
      <td>{{user.email}}</td>
      <td>{{user.salary}}</td>
      <td>
        <a class="btn btn-warning btn-sm" [routerLink]="['/edit', user.id]">Edit</a>
        <button class="btn btn-danger btn-sm ms-2" (click)="delete(user.id)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

In the User List component will add below code

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule, RouterModule],
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {

  users: any = [];

  constructor(private Service: UserService) {}

  ngOnInit(): void {
    this.userService.getUsers().subscribe((data) => {
      this.users = data;
    });
  }

  delete(id: number) {
    this.userService.deleteUser(id).subscribe(() => {
      this.ngOnInit(); // refresh list
    });
  }
}