Angular 17 basic CRUP Operation using ASP.NET WEB API:-
First create Web API in ASP.NET CORE MVC:
here i have created student model class and create API using code first approach.
using System.ComponentModel.DataAnnotations;
namespace WebApplication2.Models
{
public class Student
{
[Key]
public long rno { get; set; }
public string? name { get; set; }
}
}
Code of APIController
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.Linq.Expressions;
using WebApplication2.Models;
namespace WebApplication2.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class StudentsController : ControllerBase
{
private readonly StudentDbContext _db;
public StudentsController(StudentDbContext _db) {
this._db = _db;
}
[HttpGet]
public async Task<ActionResult<IEnumerable<Student>>> GetStudents()
{
return await _db.Students.ToListAsync();
}
[HttpGet("{id}")]
public async Task<ActionResult<Student>> GetStudentByRno(long id)
{
var studata= await _db.Students.FindAsync(id);
if(studata==null)
{
return NotFound();
}
return studata;
}
[HttpPost]
public async Task<ActionResult> AddStudents([FromBody]Student o)
{
try
{
// _db.Students.Add(o);
_db.Add(o);
await _db.SaveChangesAsync();
return Ok(new { msg = "success" });
}
catch(Exception ex)
{
return Ok(new { msg = ex.Message.ToString() });
}
}
[HttpPut]
public async Task<ActionResult> UpdateStudents([FromBody] Student o)
{
try
{
_db.Entry(o).State = EntityState.Modified;
await _db.SaveChangesAsync();
return Ok(new { msg = "success" });
}
catch (Exception ex)
{
return Ok(new { msg = "fail" });
}
}
[HttpPatch]
public async Task<ActionResult> PatchStudents([FromBody] Student o)
{
try
{
_db.Entry(o).State = EntityState.Modified;
await _db.SaveChangesAsync();
return Ok(new { msg = "success" });
}
catch (Exception ex)
{
return Ok(new { msg = "fail" });
}
}
[HttpDelete("{id:long}")]
public async Task<IActionResult> DeleteStudents(long id)
{
try
{
var o = await _db.Students.FindAsync(id);
_db.Students.Remove(o);
await _db.SaveChangesAsync();
return Ok(new { msg = "success" });
}
catch (Exception ex)
{
return Ok(new { msg = "fail" });
}
}
}
}
Now create custom Angular Service to define the all Crud operation based functionality.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class PostService {
// private url = 'http://jsonplaceholder.typicode.com/posts';
private url='https://localhost:7122/api/Students';
private url1='https://localhost:7122/api/Students';
private url2='https://localhost:7122/api/Students';
constructor(private httpClient: HttpClient) { }
findPosts(): Observable<any> {
//alert(id);
return this.httpClient.get('https://localhost:7122/api/Students/2');
}
getPosts(): Observable<any>{
return this.httpClient.get(this.url);
}
addPosts(data: any): Observable<any> {
return this.httpClient.post<any>(this.url1,data);
}
updatePosts(data: any): Observable<any> {
return this.httpClient.put<any>(this.url2,data);
}
deletePosts(id:number): Observable<any> {
// this.url2 = this.url2+"/"+id;
return this.httpClient.delete<any>(this.url2+"/"+id);
}
}
Inject PostService under Angular Component
I have created AccessUrlCompopnent and write following code under Angular Component class and
Template Page
Code of Component class for basic crud operation
import { Component } from '@angular/core';
import { PostService } from '../post.service';
@Component({
selector: 'app-access-url',
templateUrl: './access-url.component.html',
styleUrl: './access-url.component.css'
})
export class AccessUrlComponent {
posts:any;
postdata:any;
constructor(private service:PostService) {}
ngOnInit() {
this.postdata=null;
}
findPosts()
{
this.service.findPosts().subscribe(response => {
this.postdata = response;
// console.log(response);
});
}
viewData()
{
this.service.getPosts().subscribe(response => {
this.posts = response;
console.log(response);
});
}
submitData()
{
const dataToSend = {name:'shahshi'}; // Replace with your data
this.service.addPosts(dataToSend).subscribe(
(response) => {
console.log('Post successful:', response);
// Handle the response as needed
},
(error) => {
console.error('Error:', error);
// Handle errors
}
);
}
submitData1()
{
const dataToSend = {rno:2,name:'updated data'}; // Replace with your data
this.service.updatePosts(dataToSend).subscribe(
(response) => {
console.log('Edit successful:', response);
// Handle the response as needed
},
(error) => {
console.error('Error:', error);
// Handle errors
}
);
}
submitData2()
{
this.service.deletePosts(4).subscribe(
(response) => {
console.log('Delete successful:', response);
// Handle the response as needed
},
(error) => {
console.error('Error:', error);
// Handle errors
}
);
}
}
Code of Template Page:-
<p>access-url works!</p>
<ul class="list-group">
<li *ngFor="let post of posts" class="list-group-item">
{{ post.rno }} || {{ post.name }}
</li>
</ul>
<div *ngIf="postdata !== null">
Find API Data is
<b>{{postdata.rno}} || {{postdata.name}}</b>
</div>
<input type="button" value="Find" (click)="findPosts()" />
<br/>
<input type="button" value="View" (click)="viewData()" />
<br/>
<input type="button" value="Insert" (click)="submitData()" />
<br/>
<input type="button" value="Update" (click)="submitData1()" />
<br />
<input type="button" value="Delete" (click)="submitData2()" />
POST Answer of Questions and ASK to Doubt