Whenever I attempt to click the 'Add' button on a web application that I'm constructing, an error pops up.

core.js:6210 ERROR TypeError: this.service.addDepartment is not a function
at AddEditDepComponent.addDepartment (add-edit-dep.component.ts:25)
at AddEditDepComponent_button_5_Template_button_click_0_listener (add-edit-dep.component.html:10)
at executeListenerWithErrorHandling (core.js:15265)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:15303)
at HTMLButtonElement.<anonymous> (platform-browser.js:582)
at ZoneDelegate.invokeTask (zone-evergreen.js:406)
at Object.onInvokeTask (core.js:28540)
at ZoneDelegate.invokeTask (zone-evergreen.js:405)
at Zone.runTask (zone-evergreen.js:178)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:487)

I'm puzzled as to what the issue could be. The addDepartment function appears to be correct from my perspective, but the error persists.

add-create-department.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { SharedService } from 'src/app/shared.service';

@Component({
  selector: 'app-add-create-department',
  templateUrl: './add-create-department.component.html',
  styleUrls: ['./add-create-department.component.css']
})
export class AddCreateDepartmentComponent implements OnInit {

  constructor(private service : SharedService) { }

  @Input() dep: any;
  DepartmentId!:string;
  DepartmentName!:string;

  ngOnInit(): void {
    this.DepartmentId = this.dep.DepartmentId;
    this.DepartmentName = this.dep.DepartmentName;
  }

  addDepartment() {
    var val = {DepartmentId:this.DepartmentId,
                DepartmentName:this.DepartmentName};
    this.service.addDepartment(val).subscribe((res: { toString: () => any; })=>{
      alert(res.toString());
    });
  }

  updateDepartment() {
    var val = {DepartmentId:this.DepartmentId,
                DepartmentName:this.DepartmentName};
    this.service.updateDepartment(val).subscribe((res: { toString: () => any; })=>{
      alert(res.toString());
    });

  }
}

I suspect it might have something to do with 'res' because I previously encountered an error stating "res is an implicit any type" and used QuickFix in VS Code to address it. However, the updateDepartment function is almost identical and seems to be functioning correctly, so I am unsure of the problem.

This includes all the files I've been working on today. Any assistance would be greatly appreciated.

show-list-departments.component.html

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary float-right m-2" 
data-bs-toggle="modal" data-bs-target="#exampleModal"
(click)="addClick()"
data-backdrop="static" data-keyboard="false">
  Add Department
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ModalTitle}}</h5>
        <button type="button" class="btn-close" 
        data-bs-dismiss="modal" aria-label="Close"
        (click)="closeClick()" >
        </button>
      </div>
      <div class="modal-body">
        lt;app-add-create-department
          [dep]="dep" *ngIf="ActivateAddCreateDepartmentComp">
        </app-add-create-department>
      </div>
    </div>
  </div>
</div>

<table class = "table table-striped"> 
    <thead>
        <tr>
            <th>Department ID</th>
            <th>Department Name</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor = "let dataItem of DepartmentList">
            <td>{{dataItem.DepartmentId}}</td>
            <td>{{dataItem.DepartmentName}}</td>
            <td>
                <button type="button" class = "btn btn-light mr-1"
                data-bs-toggle="modal" data-bs-target="#exampleModal"
                (click)="editClick(dataItem)"
                data-backdrop="static" data-keyboard="false">
                    Edit
                </button>
                <button type="button" class = "btn btn-light mr-1&...

add.create-department.component.html

<div class = "form-froup row">

    <label class = "col-sm-2 col-form-label"> Department Name </label>
    <div class = "col-sm-10">
        <input type = "text" class = "form-control" [(ngModel)] = "DepartmentName"
        placeholder = "Enter department name">
    </div>
</div>

<button (click) = "addDepartment()" *ngIf = "dep.DepartmentId == 0" class = "btn btn-primary">
    Add
</button>

<button (click) = "updateDepartment()" *ngIf = "dep.DepartmentId != 0" class = "btn btn-primary">
    Update
</button>

shared-services.ts

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

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  [x: string]: any;

  readonly APIUrl = "http://localhost:59281/api";
  readonly PhotoUrl = "http://localhost:59281/Photos";

  constructor(private http:HttpClient) { }

  getDepList():Observable<any[]> {

    return this.http.get<any>(this.APIUrl + '/Department');
  }

  getDepartment(val:any) {
    return this.http.post(this.APIUrl + '/Department', val);
  }

  updateDepartment(val:any) {
    return this.http.put(this.APIUrl + '/Department', val);
  }

  deleteDepartment(val:any) {
    return this.http.delete(this.APIUrl + '/Department/' + val);
  }

  getEmpList():Observable<any[]> {

    return this.http.get<any>(this.APIUrl + '/Employee');
  }

  getEmployee(val:any) {
    return this.http.post(this.APIUrl + '/Employee', val);
  }

  updateEmployee(val:any) {
    return this.http.put(this.APIUrl + '/Employee', val);
  }

  deleteEmployee(val:any) {
    return this.http.delete(this.APIUrl + '/Employee/' + val);
  }

  UploadPhoto(val:any) {
    return this.http.post(this.APIUrl + 'Employee/SaveFile', val);
  }

  getAllDepartmentNames():Observable<any[]> {
    return this.http.get<any[]>(this.APIUrl + '/Employee/GetAllDepartmentNames');
  }

}