The main objectives of this article are:
step 3:
step 4:
step 2:
Angular_Project/src/app/student/student.component.html:
Step 3:
Step 4:
- Implement HTTP Post Create Action Method In API
- Implement HTTP Post API Call At Student Service In Angular App
- Student Component Implement Logic To Create A New Student
- Implement HTTP Put Update Action Method In API
- Implement HTTP Put API Call-In Student Service
- Student Component Implement Logic To Update An Existing Student
- Implement HTTP Delete Action Method In API
- Implement HTTP Delete API Call At Student Service
- Student Component Implement Logic To Delete Student
Implement HTTP Post Create Action Method In API:
Let's try to create a new student record into our database by implementing the HTTP Post Action Method(or Create action method.) in our 'StudentController'.
API_Project/Controllers/StudentController.cs:
[HttpPost] public async Task<IActionResult> Post(Student.Api.Data.Entities.Student payload) { _myWorldDbContext.Student.Add(payload); await _myWorldDbContext.SaveChangesAsync(); return Ok(payload); }
- (Line: 1) The 'HttpPost' attribute makes our action method gets invoke for the HTTP Post request.
- (Line: 2-7) Defined our 'Post' asynchronous action method. Here it takes 'payload' as input data of type 'Student'.
- (Line: 4) Adding our new record to the database context.
- (Line: 5) Returning the newly created record as a response.
Implement HTTP Post API Call At Student Service In Angular App:
In angular 'StudentService' let's add a new method for invoking the HTTP Post endpoint.
Angular_Project/src/app/student/student.service.ts:
post(payload: Student) { return this.httpClient.post<Student>( 'https://localhost:7007/student', payload ); }
- Here created 'post()' method that contains 'payload' of type 'Student' as input.
- The 'httpClient.post<T>()' invokes the HTTP Post action method at the server.
Student Component Implement Logic To Create A New Student:
Let's implement a logic to create a new 'Student' in the student component.
Angular_Project/src/app/student/student.component.ts:
import { Component, OnInit } from '@angular/core'; import { Student } from './student'; import { StudentService } from './student.service'; declare var window: any; @Component({ selector: 'app-student', templateUrl: './student.component.html', styleUrls: ['./student.component.css'], }) export class StudentComponent implements OnInit { addorupdatemodal: any; studentForm: Student = { age: 0, gender: 'Male', id: 0, name: '', }; addorupdatemodalTitle: string = ''; students: Student[] = []; constructor(private studentService: StudentService) {} ngOnInit(): void { this.get(); this.addorupdatemodal = new window.bootstrap.Modal( document.getElementById('addorupdatemodal') ); } get() { this.studentService.get().subscribe({ next: (data) => { this.students = data; }, error: (err) => { console.log(err); }, }); } openAddOrUpdateModal(studentId: number) { if (studentId === 0) { this.addorupdatemodalTitle = 'Add'; this.studentForm = { age: 0, gender: 'Male', id: 0, name: '', }; this.addorupdatemodal.show(); } } createorUpdateStudent() { if (this.studentForm.id == 0) { this.studentService.post(this.studentForm).subscribe({ next: (data) => { this.students.unshift(data); this.addorupdatemodal.hide(); }, error: (error) => { console.log(error); }, }); } } }
- (Line: 6) Defined window variable.
- (Line: 14) Declared 'addorupdatemodal' variable.
- (Line: 15-20) Initialized 'studentForm' withdefault values.
- (Line: 21) Initialized 'addorupdatemodalTitle' variable.
- (Line: 20-30) The instance of the bootstrap modal is assigned to the 'addorupdatemodal' variable. Here while creating an instance needs to pass modal HTML 'id' as an input parameter.
- (Line: 44-55) Defined method 'openAddOrUpdateModal' which gets invoke for opening the bootstrap modal.
- (Line: 45) The 'studentId == 0' condition is for creating the new 'student' record.
- (Line: 47-52) The 'studentForm' data set defaults because these data will be bound to the form on the bootstrap modal.
- (Line: 53) The 'show' method to open the bootstrap modal.
- (Line: 57-68) The 'createorUpdateStudent()' method gets invokes by clicking the save button on the modal form.
- (Line: 58) The condition 'this.studentFrom.id == 0' for adding new student.
- (Line: 59) Invoking the post API call.
- (Line: 61) On API success the response that contains a newly created item is added to the top of the existing collection using the 'unshift' button.
<div class="container"> <div class="row"> <div class="col col-md-4 offset-md-4"> <button type="button" (click)='openAddOrUpdateModal(0)' class="btn btn-primary">Add</button> </div> </div> </div> <!-- existing code hidden for display --> <!-- Modal --> <div class="modal fade" id="addorupdatemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">{{addorupdatemodalTitle}}</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button> </div> <div class="modal-body"> <div class="container"> <div class="row"> <input type="hidden" id="studentId" [(ngModel)]="studentForm.id"> <div class="mb-3"> <label for="name" class="form-label" >Name</label > <input type="text" class="form-control" id="name" [(ngModel)]="studentForm.name" /> </div> <div class="mb-3"> <label for="age" class="form-label" >Age</label > <input type="number" class="form-control" id="age" [(ngModel)] = "studentForm.age" /> </div> <div class="mb-3"> <label for="age" class="form-label" >Gender</label > <select class="form-select" [(ngModel)] = "studentForm.gender" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button> <button type="button" (click)="createorUpdateStudent()" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
- Here render the bootstrap modal with the form inside of it.
- (Line: 6) The Modal HTML 'id' is needed because the component gets the reference of the bootstrap modal from it.
- (Line: 14) Made bootstrap modal title dynamic.
- Here is added a small form and enabled 2-way binding with '[(ngModel)]'.
- (Line: 65) For 'Save Changes' button registered 'createorUpdateStudent()' as a click method.
Angular_Project/src/app/app.module.ts:
import { FormsModule } from '@angular/forms'; @NgModule imports: [FormsModule] }) export class AppModule {}step 1:step 2:
step 3:
step 4:
Implement HTTP Put Update Action Method In API:
Let's try to update a student in our database by implementing the HTTP Put action method(or Update action method) in our 'StudentConroller'.
API_Project/Controllers/StudentController.cs:
[HttpPut] public async Task<IActionResult> Put(Student.Api.Data.Entities.Student payload) { _myWorldDbContext.Student.Update(payload); await _myWorldDbContext.SaveChangesAsync(); return Ok(payload); }
- (Line: 1) The 'HttpPut' attribute makes our action method only invoked by the HTTP Put requests.
- (Line: 2-7) Defined the 'Put' asynchronous action method.
- (Line: 4) Using the 'Update()' method of DB context we can change the state of the context as ready to update.
- (Line: 5) Saving changes into the database.
Implement HTTP Put API Call-In Student Service:
In angular 'StudentService' let's add a new method for invoking the HTTP Put endpoint.
Angular_Project/src/app/student/student.service.ts:
update(payload: Student) { return this.httpClient.put<Student>( 'https://localhost:7007/student', payload ); }
- Here created 'update()' method that contains 'payload' of type 'Student' as input.
- The 'httpClient.put<T>()' invokes the HTTP Put action method at the server.
Student Component Implement Logic To Update An Existing Student:
Let's implement the logic for updating the student record in StudentComponent. Let's first update the logic inside of the 'openAddOrUpdateModal()' method.
Angular_Project/src/app/student/student.component.ts:
openAddOrUpdateModal(studentId: number) { if (studentId === 0) { this.addorupdatemodalTitle = 'Add'; this.studentForm = { age: 0, gender: 'Male', id: 0, name: '', }; this.addorupdatemodal.show(); }else{ this.addorupdatemodalTitle = 'Update'; this.studentForm = this.students.filter(s => s.id === studentId)[0]; this.addorupdatemodal.show(); } }
- (Line: 12) Dynamic title for the modal.
- (Line: 13) Filtering the required student record to be filtered and then assigned to the 'this.studentForm', so that our modal form opens with student information that needs to be edited.
- (Line: 14) Opens the bootstrap modal.
Angular_Project/src/app/student/student.component.ts:
createorUpdateStudent() { if (this.studentForm.id == 0) { this.studentService.post(this.studentForm).subscribe({ next: (data) => { this.students.unshift(data); this.addorupdatemodal.hide(); }, error: (error) => { console.log(error); }, }); }else{ this.studentService.update(this.studentForm).subscribe({ next:(data) => { this.students = this.students.filter(_ => _.id !== data.id); this.students.unshift(data); this.addorupdatemodal.hide(); } }) } }
- (Line: 13-18) Invoking the update API, on success, the existing record from the collection is removed, and then updates the collection with the updated record then closes the modal using the 'hide' method.
Angular_Project/src/app/student/student.component.html:
<table class="table"> <thead> <tr> <th scope="col">Id</th> <th scope="col">Name</th> <th scope="col">Age</th> <th scope="col">Gender</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr *ngFor="let sd of students"> <th scope="row">{{ sd.id }}</th> <td>{{ sd.name }}</td> <td>{{ sd.age }}</td> <td>{{ sd.gender }}</td> <td> <button class="btn btn-primary" (click)="openAddOrUpdateModal(sd.id)">Edit</button> </td> </tr> </tbody> </table>
- (Line: 8) Added a new column like 'Action'.
- (Line: 18) Edit button and its click event registered with 'openAddOrUpdateModal' and passing the 'id' value as input parameter.
Implement HTTP Delete Action Method In API:
Let's try to delete a student record in our database by implementing the HTTP Delete Action Method in our 'StudentController'.
API_Project/Controllers/StudentController.cs:
[HttpDelete] public async Task<IActionResult> Delete(int id) { var studentToDelete = await _myWorldDbContext.Student.FindAsync(id); if (studentToDelete == null) { return NotFound(); } _myWorldDbContext.Student.Remove(studentToDelete); await _myWorldDbContext.SaveChangesAsync(); return Ok(); }
- (Line: 1) The 'HttpDelete' attribute makes our action method will invoke by the HTTP Delete request.
- (Line: 2-12) Defined the 'Delete' asynchronous action method and it takes the 'id' as an input parameter.
- (Line: 4) Fetching the student from the database that needs to be deleted.
- (Line: 5-8) If the record does not exist then return the response as 'NotFound'.
- (Line: 9-10) Removing the student record from the database.
Implement HTTP Delete API Call At Student Service:
In angular 'StudentService' let's add a new method for invoking the HTTP Delete endpoint.
Angular_Project/src/app/student/student.service.ts:
delete(studetId: number) { return this.httpClient.delete( `https://localhost:7007/student?id=${studetId}` ); }
- Here created the 'delete()' method that contains the student id as input.
- The 'httpClient.delete()' invokes the HTTP Delete action method at the server.
Student Component Implement Logic To Delete Student:
Let's implement logic to delete a student from the Student Component.
Angular_Project/src/app/student/student.component.ts:
// code hidden for display purpose export class StudentComponent implements OnInit { deleteModal: any; studentIdToDelete: number = 0; constructor(private studentService: StudentService) {} ngOnInit(): void { this.get(); this.addorupdatemodal = new window.bootstrap.Modal( document.getElementById('addorupdatemodal') ); this.deleteModal = new window.bootstrap.Modal( document.getElementById('deleteModal') ); } openDeleteModal(studentId: number) { this.studentIdToDelete = studentId; this.deleteModal.show(); } confirmDelete(){ this.studentService.delete(this.studentIdToDelete) .subscribe({ next:(data) => { this.students = this.students.filter(_ => _.id !== this.studentIdToDelete); this.deleteModal.hide(); }, error:(error) => { console.log(error); } }) } }
- (Line: 4) Declared the 'deleteModal' variable.
- (Line: 5) Initialized the 'studentIdToDelete' variable.
- (Line: 15-17) Assigned bootstrap modal instance to the 'deleteModal' variable.
- (Line: 20-23) Defined the 'OpenDeleteModal' to open the delete confirmation popup.
- (Line: 21) Assign the student id record that we want to delete to the 'studentToDelete'.
- (Line: 22) Opens the delete confirmation popup.
- (Line: 25-35) Defined the 'confirmDelete()' method in which we invokes the delete API.
<!-- code hiddden for display purpose --> <table class="table"> <thead> <tr> .... </tr> </thead> <tbody> <tr *ngFor="let sd of students"> .......... <td> <button class="btn btn-primary" (click)="openAddOrUpdateModal(sd.id)">Edit</button> | <button class="btn btn-primary" (click)="openDeleteModal(sd.id)">Delete</button> </td> </tr> </tbody> </table> <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Delete</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <h1>Delete Confiramtion </h1> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" (click)="confirmDelete()" class="btn btn-primary">Delete</button> </div> </div> </div> </div>
- (Line: 13) Defined the 'Delete' button and click event registered with 'openDeleteModal()' method.
- (Line: 19-35) Bootstrap modal for displaying the delete confirmation modal.
- (Line: 31) The 'Delete' button and its click event registered with 'confirmDelete()' method.
Step 3:
Step 4:
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful demo on .NET6 API and Angular application. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Brilliant article.. thumbs up, Naveen!
ReplyDelete