Angular CRUD example with Web API
In this blog, I will build an Angular application to demonstrate the CRUD example step by step. I will use C# and ASP.Net Web API as a middle-ware between Angular and SQL databases.
Angular CRUD Example -
C- Create record in database
R- Read record(s) from database
U- Update existing record
D- Delete existing record
Before starting, make sure you have below tools/software to develop the application.
Step 2. Create an ASP.Net Web API project. Add a controller to your Web API.
I have created a Web API 2 controller with actions, using Entity Framework. You may create as per your interest and requirement. Click Here to know how to create ASP.Net Web API in Visual Studio 2017
My ProductMasterController code looks like this.
Step 3: Add below line in your WebApiConfig.cs file to avoid CORS related error.
Use below command to create new Angular project
ng new <Angular Project Name>
Create a new component using below command
ng g c <Component Name>
Create a service file in the Angular project. I have created ProductMasterService using the below command.
ng g s <Service Name>
More Angular commands - Angular CLI Command-List
So, all changes which are related to API can be done in the service file, we don't need to touch component file. Service is also a way to separate API logic or data communication task from the component.
Now, add a class in your Angular project. I have added this class to the service file itself.
Step 5: Add route(s) to your CRUD page in app-routing .module.ts
So, you can access your page using <localhost:4200/crud>
Step 6 : import HttpClientModule, FormsModule and ReactiveFormsModule in app.module.ts file
Step 7: Add the above modules name in import array.
Step 8 : Build your HTML page as per your requirement.
- Visual Studio 2017 or compatible IDE to develop .Net Web API
- SQL Server (Any version)
- Visual Studio Code to write Angular code
- Finally, you must have npm and angular installed on your machine.
Read:- Angular Interview Questions
Let's demonstrate Angular CRUD example step by step
Step 1: Create your database and table.Step 2. Create an ASP.Net Web API project. Add a controller to your Web API.
I have created a Web API 2 controller with actions, using Entity Framework. You may create as per your interest and requirement. Click Here to know how to create ASP.Net Web API in Visual Studio 2017
My ProductMasterController code looks like this.
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class ProductMasterController : ApiController
{
private PilotDBEntities db = new PilotDBEntities();
// GET: api/ProductMaster
public IQueryable<Product_Master>
GetProduct_Master()
{
return db.Product_Master;
}
// GET: api/ProductMaster/5
[ResponseType(typeof(Product_Master))]
public IHttpActionResult
GetProduct_MasterById(int id)
{
Product_Master
product_Master = db.Product_Master.Find(id);
if (product_Master == null)
{
return NotFound();
}
return Ok(product_Master);
}
[HttpPost]
// PUT: api/ProductMaster/5
[ResponseType(typeof(void))]
public IHttpActionResult
PutProduct_Master(int id,
Product_Master product_Master)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != product_Master.id)
{
return BadRequest();
}
db.Entry(product_Master).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!Product_MasterExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return
StatusCode(HttpStatusCode.Accepted);
}
[HttpPost]
// POST: api/ProductMaster
[ResponseType(typeof(Product_Master))]
public IHttpActionResult
PostProduct_Master([FromBody]Product_Master product_Master)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.Product_Master.Add(product_Master);
try
{
db.SaveChanges();
}
catch (DbUpdateException)
{
if
(Product_MasterExists(product_Master.id))
{
return Conflict();
}
else
{
throw;
}
}
//return CreatedAtRoute("DefaultApi", new { id =
product_Master.id }, product_Master);
return Ok(product_Master);
}
// DELETE: api/ProductMaster/5
[HttpPost]
[ResponseType(typeof(Product_Master))]
public IHttpActionResult
DeleteProduct_Master(int id)
{
Product_Master
product_Master = db.Product_Master.Find(id);
if (product_Master == null)
{
return NotFound();
}
db.Product_Master.Remove(product_Master);
db.SaveChanges();
return Ok(product_Master);
}
protected override void
Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
private bool Product_MasterExists(int id)
{
return db.Product_Master.Count(e =>
e.id == id) > 0;
}
}
|
Step 3: Add below line in your WebApiConfig.cs file to avoid CORS related error.
config.EnableCors();
|
Create an Angular Project for CRUD example
Step 4: Create an Angular Project. How to create an Angular Project using CLI?Use below command to create new Angular project
ng new <Angular Project Name>
Create a new component using below command
ng g c <Component Name>
Create a service file in the Angular project. I have created ProductMasterService using the below command.
ng g s <Service Name>
More Angular commands - Angular CLI Command-List
What is Service in Angular?
Service helps us to access methods from various components in an Angular project. For this blog, I have created a service file to communicate with API which can be accessible from components.So, all changes which are related to API can be done in the service file, we don't need to touch component file. Service is also a way to separate API logic or data communication task from the component.
export class ProductMasterService {
url = 'http://localhost:52838/api/ProductMaster';
constructor(private http: HttpClient) { }
getProductList(): Observable<Products[]> {
return this.http.get<Products[]>(this.url + '/GetProduct_Master');
}
postProductData(productData: Products): Observable<Products> {
const httpHeaders = { headers:new HttpHeaders({'Content-Type': 'application/json'}) };
return this.http.post<Products>(this.url + '/PostProduct_Master/', productData, httpHeaders);
}
updateProduct(product: Products): Observable<Products> {
const httpHeaders = { headers:new HttpHeaders({'Content-Type': 'application/json'}) };
return this.http.post<Products>(this.url + '/PutProduct_Master/?id=' + product.id, product, httpHeaders);
}
deleteProductById(id: string): Observable<number> {
return this.http.post<number>(this.url + '/DeleteProduct_Master?id=' + id, null);
}
getProductDetailsById(id: string): Observable<Products> {
return this.http.get<Products>(this.url + '/GetProduct_MasterById/' + id);
}
}
|
What is Observable?
Observable is available with the RxJS library. Angular uses Observable to implement the asynchronous process. Observable gets executed when a consumer calls Subscribe() function.Now, add a class in your Angular project. I have added this class to the service file itself.
export class Products {
id: string;
product_name: string;
product_category: Date;
product_desc: string;
cost: number;
stcok: number;
}
|
Step 5: Add route(s) to your CRUD page in app-routing .module.ts
So, you can access your page using <localhost:4200/crud>
import { CRUDExampleComponent } from './crudexample/crudexample.component';
const routes: Routes = [
{path: 'crud', component: CRUDExampleComponent}
];
|
Step 6 : import HttpClientModule, FormsModule and ReactiveFormsModule in app.module.ts file
import {HttpClientModule} from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
Step 7: Add the above modules name in import array.
imports: [
BrowserModule,
AppRoutingModule, HttpClientModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule
],
|
Step 8 : Build your HTML page as per your requirement.
I have created simple HTML form and call it crudexample.component.html
You may apply Form validation as per your requirement. Know how to implement Form validation in Angular
Step 9: Write code in .ts file
CrudExample.component.ts
Run your application and insert few items using Form.
You may see data is displaying in Tabular format with 2 action buttons Edit and Delete.
You may like other blogs -
Interview Questions and Answers Series -
MVC Interview Questions and Answers
Web API interview questions and answers
Prev - Bindings in Angular
Next - Build and Host Angular App in IIS
You may apply Form validation as per your requirement. Know how to implement Form validation in Angular
<form
class="form-horizontal"
[formGroup]="productForm">
<div class="form-group">
<label class="control-label
col-sm-2" for="pwd">Name of Product :</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
id="txtProductName"
formControlName="product_name"
placeholder="Name
of Product">
</div>
</div>
<div class="form-group">
<label class="control-label
col-sm-2" for="pwd">Cost of Product :</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
id="txtProductCost"
formControlName="cost"
placeholder="Cost
of Product">
</div>
</div>
<div class="form-group">
<label class="control-label
col-sm-2" for="pwd">Product Description :</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
id="txtProductDescription"
formControlName="product_desc"
placeholder="Product
Description">
</div>
</div>
<div class="form-group">
<label class="control-label
col-sm-2" for="pwd"># of Stock Available :</label>
<div class="col-sm-2">
<input type="text"
class="form-control"
id="txtStock"
formControlName="stcok"
placeholder="Stock
Available">
</div>
</div>
<div class="form-group">
<label class="control-label
col-sm-2" for="pwd">Product Category :</label>
<div class="col-sm-10">
<select formControlName="product_category"
[(ngModel)]='prodCategory'>
<option
value="0">---Select--</option>
<option>Electronics</option>
<option>Fashion</option>
<option>Grocery</option>
<option>Home
Appainces</option>
<option>Health
and Beauty</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2
col-sm-10">
<button type="submit"
class="btn
btn-default" (click)="PostProduct(productForm.value)">Submit</button>
<button type="submit"
class="btn
btn-default" (click)="UpdateProduct(productForm.value)">Update</button>
</div>
</div>
<div>
<div class="alert
alert-info"><b>Product
List</b></div>
<div class="table-responsive">
<table class="table">
<tr>
<th>Product
Name</th>
<th>Cost</th>
<th>#
of Stock</th>
<th>Category</th>
<th>Action</th>
</tr>
<tr
*ngFor="let
prd of ProductList | async">
<td>{{prd.product_name}}</td>
<td>{{prd.cost}}</td>
<td>{{prd.stcok}}</td>
<td>{{prd.product_category}}</td>
<td><button
type="button"
matTooltip="Click
Edit Button" (click)="ProductDetailsToEdit(prd.id)">Edit</button>
|
<button type="button"
matTooltip="Click
Delete Button" (click)="DeleteProduct(prd.id)">Delete</button>
</td>
</tr>
</table>
</div>
</div>
</form>
|
Create and Update Form
Step 9: Write code in .ts file
CrudExample.component.ts
export
class
CRUDExampleComponent implements
OnInit {
ProductList: Observable<Products[]>;
productForm: any;
massage = '';
prodCategory = '';
productId = '';
constructor(private
formbulider: FormBuilder, private
httpClient: HttpClient,
private productService:
ProductMasterService) { }
ngOnInit() {
this.prodCategory = "0";
this.productForm = this.formbulider.group({
product_name: ['',
[Validators.required]],
cost: ['',
[Validators.required]],
product_desc: ['',
[Validators.required]],
stcok: ['',
[Validators.required]],
product_category: ['',
[Validators.required]]
});
this.getProductList();
}
getProductList() {
this.ProductList = this.productService.getProductList();
}
PostProduct(product: Products) {
debugger;
const product_Master = this.productForm.value;
this.productService.postProductData(product_Master).subscribe(
() =>
{
this.massage
= 'Data Saved Successfully';
this.getProductList();
}
);
}
ProductDetailsToEdit(id: string) {
debugger;
this.productService.getProductDetailsById(id).subscribe(productResult
=> {
this.productId =
productResult.id;
this.productForm.controls['product_name'].setValue(productResult.product_name);
this.productForm.controls['cost'].setValue(productResult.cost);
this.productForm.controls['product_desc'].setValue(productResult.product_desc);
this.productForm.controls['stcok'].setValue(productResult.stcok);
this.productForm.controls['product_category'].setValue(productResult.product_category);
});
}
UpdateProduct(product: Products) {
debugger;
product.id = this.productId;
const product_Master = this.productForm.value;
this.productService.updateProduct(product_Master).subscribe(()
=> {
this.massage = 'Record Updated Successfully';
this.getProductList();
});
}
DeleteProduct(id: string) {
if (confirm('Do you want to delete this product?'))
{
this.productService.deleteProductById(id).subscribe(()
=> {
this.getProductList();
});
}
}
}
|
Run your application and insert few items using Form.
You may see data is displaying in Tabular format with 2 action buttons Edit and Delete.
Summary:
To perform an Angular CRUD example, first you create a web API that is connected to the database, then create an application in Angular and add a component to it.
After that whenever you make a service call you have to use Observable and subscribe method as directed in the code example above.
Then you can easily work by connecting any API or service with your Angular application.
Hope this example of Angular will help you.
Do share it in your friends' community, and if there is some feedback, write in the comment box below.You may like other blogs -
MVC Interview Questions and Answers
Web API interview questions and answers
Prev - Bindings in Angular
Next - Build and Host Angular App in IIS
Comments
Post a Comment
Dear Readers, Please post your valuable feedback in the comment section if you like this blog or if you have any suggestions. I would love to hear the same from you. Thanks