I'm getting this error when I try to press the 'Add' button on a web application I'm building.
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 don't quite know what the problem is. The function addDepartment looks fine to me, but the error is definitely there.
add-edit-dep.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { SharedService } from 'src/app/shared.service';
@Component({
selector: 'app-add-edit-dep',
templateUrl: './add-edit-dep.component.html',
styleUrls: ['./add-edit-dep.component.css']
})
export class AddEditDepComponent 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 would like to think it has something to do with 'res' because I was getting an error (res is an implicit any type) and used QuickFix in VS Code to fix it. But the updateDepartment function is basically identical and it is working properly, so I don't know what the problem is.
I've included all the files I worked on today. I'd appreciate any help.
show-dep.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">
<app-add-edit-dep
[dep]="dep" *ngIf="ActivateAddEditDepComp">
</app-add-edit-dep>
</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">
Delete
</button>
</td>
</tr>
</tbody>
</table>
add.edit-dep.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.service.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');
}
}
There is no addDepartment(val:any) function in your SharedService class, this is one of those cases where error messages point to exactly the right place.
You're calling this.service.addDepartment(val) in the addDepartment() method of the AddEditDepComponent