Angular - Component Files

department.component.css

     your local CSS for your custom fields.

department.component.html

<main class="main">

    <div class="content">

      <div class="left-side">

<div>

    <!-- Heading -->

    <h1>Departments</h1>

    <button (click)="newDepartment()" class="btn">Add New Department</button>

    <!-- Grid -->

    <table>

        <thead>

            <tr>

                <th>ID</th>

                <th>Name</th>

                <th>Actions</th>

            </tr>

        </thead>

        <tbody>

            <tr *ngFor="let department of departments">

                <td>{{ department.departmentId }}</td>

                <td>{{ department.name }}</td>

                <td>

                    <button (click)="selectDepartment(department)" class="btn-action">Edit</button>

                    <button (click)="deleteDepartment(department.departmentId!)" class="btn-action delete">Delete</button>

                </td>

            </tr>

        </tbody>

    </table>

   

    <!-- Add/Edit Form -->

    <div *ngIf="selectedDepartment" class="form-container">

        <h2>{{selectedDepartment?.departmentId ? 'Edit' : 'Add'}} Department</h2>

   

        <form id="departmentForm" (ngSubmit)="updateDepartment(selectedDepartment)">

            <div class="form-group">

                <label for="departmentName">Department Name</label>

                <input type="text" id="departmentName" name="departmentName" [(ngModel)]="selectedDepartment.name"

                    placeholder="Enter department name" required>

            </div>

            <app-departmentTeam></app-departmentTeam>

           

            <button type="submit" class="btn">Submit</button>

            <button type="button" (click)="clearSelection()" class="btn btn-outline">Cancel</button>

        </form>

    </div>

</div>

</div>

</div>

</main>

department.component.spec.ts

department.component.ts

import { Component } from '@angular/core';

import { Department } from '../../models/department';

import { DepartmentService } from '../../services/department.service';

import { CommonModule } from '@angular/common';

import { FormsModule } from '@angular/forms';

import { DepartmentTeamComponent } from '../departmentTeam/departmentTeam.component';

@Component({

  selector: 'app-department',

  standalone: true,

  imports: [ CommonModule,  FormsModule, DepartmentTeamComponent ],

  templateUrl: './department.component.html',

  styleUrl: './department.component.css'

})

export class DepartmentComponent {

  departments: Department[] = [];

  selectedDepartment: Department | null = null;

  constructor(private departmentService: DepartmentService) { }

  ngOnInit(): void {

    this.loadDepartments();

  }

  loadDepartments(): void {

    this.departmentService.getDepartments().subscribe((data) => {

      this.departments = data;

    });

  }

  updateDepartment(department: Department): void {

    if (department.departmentId) {

      this.departmentService.updateDepartment(department.departmentId, department).subscribe(() => {

        console.log("Updated successfully!");

        this.loadDepartments();

      }, (error) => {

        console.log("Problem while updating department!");

      });

    }

    else {

        department.departmentId = 0;

      this.departmentService.createDepartment(department).subscribe((department) => {

        this.departments.push(department);

      });

    }

    this.selectedDepartment = null;

  }

  deleteDepartment(departmentId: number): void {

    if(confirm("Are you sure you want to delete this department?")){

      this.departmentService.deleteDepartment(departmentId).subscribe(() => {

        console.log("Delete successfully!");

        this.departments = this.departments.filter((p) => p.departmentId !== departmentId);

      }, (error) => {

        console.log("Problem while deleting department!");

      });

    }

  }

  newDepartment(): void {

    this.selectedDepartment = { name:'' };

  }

  selectDepartment(department: Department): void {

    this.selectedDepartment = { ...department };

  }

  clearSelection(): void {

    this.selectedDepartment = null;

  }

}