I have a JSON array called courseList with multiple parameters:
public courseList:any=[
{
id:1,
cName: "Angular",
bDesc: "This is the basic course for Angular.",
amt: "$50",
dur: "120 Hours"
},
{
id:2,
cName: "React",
bDesc: "This is the basic course for React.",
amt: "$55",
dur: "125 Hours"
},
{
id:3,
cName: "MEAN Stack",
bDesc: "This is the basic course for MEAN Stack.",
amt: "$100",
dur: "160 Hours"
},
{
id:4,
cName: "MERN Stack",
bDesc: "This is the basic course for MERN Stack.",
amt: "110",
dur: "155 Hours"
},
{
id:5,
cName: "Full Stack",
bDesc: "This is the basic course for Full Stack.",
amt: "$180",
dur: "180 Hours"
}
];
The API link I previously used is inactive now. Therefore, I want to use this courseList array in my service.ts file to perform CRUD (Create, Read, Update, Delete) operations through a Reactive Angular Form.
To do this, I need to replace the API with the courseList array. Whenever data is added, updated, or deleted through the form submission, the changes will reflect in the table along with existing data. Deleted data will not be shown.
A set of Radio buttons allows selecting a specific record from the table for updating or deleting.
The Reactive Form has four fields:
Course Name=>cName
Brief Description=>bDesc
Amount=>amt
Duration=>dur
Below are sections of my code...
course.service.ts
export class CourseService {
constructor(private http:HttpClient) { }
// All courses related API will be defined here
private Base_Url:string = ""
getAllCourses(){
return this.http.get(`${this.Base_Url}`);
}
// Add Course Data
addCourseData(Data:any){
return this.http.post(`${this.Base_Url}`,Data);
}
// Update Course Data
updateCourseData(ID:any,Data:any){
return this.http.put(`${this.Base_Url}${ID}`,Data);
}
// Delete Course Data
deleteCourseData(ID:any){
return this.http.delete(`${this.Base_Url}${ID}`)
}
}
admin.component.ts
export class AdminComponent {
public page:number=1;
public courseList:any=[...];
public selectedCourseData:any=[];
public courseData!:FormGroup;
constructor(private cService:CourseService,private fbuilder:FormBuilder) {...}
...
admin.component.html
<div class="container-fluid">
...
</div>
If there are any errors in how I've connected courseList array to the getAllCourses(){} method in service.ts and the subsequent subscriber({}) method in populatecourses() function in component.ts, please guide me as I'm new to this area. Your help is much appreciated.