CRUD Operations in Angular 5 with restful service

This tutorial has the answer of below questions.
How to use GET method in Angular 5.?
How to use POST method in Angular 5.?
How to use PUT method in Angular 5.?
How to use DELETE method in Angular 5.?
How to use HttpClientModule in Angular 5?
How to Call Restful service in angular 5.
How to use forms in angular 5.
How to perform validations in angular 5.
How to use model pop up in angular 5.
Drop Down in angular 5.
success, info, error and warning in angular 5.
error handling in angular 5 . Subscribe restful service response in angular 5. Menu and navigation in angular 5.
How to use Grid in angular 5.
How to use data table in angular 5.
crud in angular. web api , entity framework
Inventory Management System in Angular Web API

[DotNetTechy]

Hi Guys,
Below is two important video which will explain all the CRUD operations code in details.
So if you really want to learn then please watch these video then try to do CRUD operation in Anagular 5.



Here is the code of CRUD operation in Angular 5 with WEB API Entity Framework:

Type Script Code for Insert, update, delete, get:-

OnUpdate(value: string) {
this.submitted = true;
this.msgsupdate = [];
var id =
var name =
var code =
var quantity =
var unitprice =
var description =
var category =

let item=new Item(id, name, code, quantity, unitprice, category, description);
+ id, item)
.subscribe((result) => {
this.globalResponse = result;
},
error => { //This is error part
console.log(error);
this.msgsupdate.push({severity:'error', summary:'An error occured during update operation', detail:error});
},
() => {
// 'onCompleted' callback. This is Success part
if (this.globalResponse.Id == id){
this.msgsupdate.push({severity:'success', summary:'Item Updated successfuly', detail:'Form Submitted'});

.subscribe((data) => {
this.inventoryItems = data;
})
}
}
)
}
OnDelete(value: string) {
this.submitted = true;
this.msgsdelete = [];
var id =
+ id)
.subscribe((result) => {
this.globalResponse = result;
},
error => { //This is error part
console.log(error);
this.msgsdelete.push({severity:'error', summary:'An error occured during delete operation', detail:error});
},
() => {
// 'onCompleted' callback. This is Success part
if (this.globalResponse.Id == id) {
this.msgsdelete.push({severity:'success', summary:'Item Deleted successfuly', detail:'Form Submitted'});

.subscribe((data) => {
this.inventoryItems = data;
})
}
}
)
}
OnInsert(value: string)
{
this.insertform.value;
var name =
var code =
var quantity =
var unitprice =
var description =
var category =

let item=new Item(0, name, code, quantity, unitprice, category, description);
this.submitted = true;
this.msgs = [];
this.httpClient.post(this.apiURL, item)
.subscribe((result) => {
this.globalResponse = result;
},
error => { //This is error part
console.log(error);
this.msgs.push({severity:'error', summary:'An error occured during insert operation', detail:error});
},
() => {
// 'onCompleted' callback. This is Success part
if (this.globalResponse.Name == name) {
this.msgs.push({severity:'success', summary:'Item Inserted successfuly', detail:'Form Submitted'});

.subscribe((data) => {
this.inventoryItems = data;
})
}
}
)
}


Respective HTML of Insert Operation which is used very much similar for all other operation(Just copy this HTML and use in Update and Delete operation):

<!-- Add Add New Item To Inventory Starts -->
<p-dialog header="Add New Item To Inventory" [(visible)]="displayAdd" [width]="830" [responsive]="true" showEffect="fade" [modal]="true">
<p-growl [value]="msgs" life="2000" ></p-growl>

<form [formGroup]="insertform"
<!-- <p-panel header="Validate"> -->
<div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px">
<div class="ui-grid-row">
<div class="ui-grid-col-2">
Name *:
</div>
<div class="ui-grid-col-6">
<input pInputText type="text" formControlName="name" placeholder="Required"/>
</div>
<div class="ui-grid-col-4">
<div class="ui-message ui-messages-error ui-corner-all"
<i class="fa fa-close"></i>
Item name is required
</div>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">
Code *:
</div>
<div class="ui-grid-col-6">
<input pInputText type="text" formControlName="code" placeholder="Required"/>
</div>
<div class="ui-grid-col-4">
<div class="ui-message ui-messages-error ui-corner-all"
<i class="fa fa-close"></i>
Item Code is required
</div>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">
Quantity *:
</div>
<div class="ui-grid-col-6">
<input pInputText type="text" formControlName="quantity" placeholder="Required - Min(1)"/>
</div>
<div class="ui-grid-col-4">
<div class="ui-message ui-messages-error ui-corner-all"
<i class="fa fa-close"></i>
<span is required</span>
<!-- <span be longer than 6 characters</span> -->
</div>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">
Per Unit Price *:
</div>
<div class="ui-grid-col-6">
<input pInputText type="text" formControlName="unitprice" placeholder="Required - Min(1)"/>
</div>
<div class="ui-grid-col-4">
<div class="ui-message ui-messages-error ui-corner-all"
<i class="fa fa-close"></i>
<span Unit Price is required</span>
</div>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">
Description:
</div>
<div class="ui-grid-col-6">
<textarea pInputTextarea type="text"
</div>
<div class="ui-grid-col-4"></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">
Category *:
</div>
<div class="ui-grid-col-6">
<p-dropdown [options]="Category" formControlName="category"
</div>
<div class="ui-grid-col-4">
<div class="ui-message ui-messages-error ui-corner-all"
<i class="fa fa-close"></i>
Category is required
</div>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2"></div>
<div class="ui-grid-col-6">
<button pButton type="submit" label="Insert"
</div>
<div class="ui-grid-col-4"></div>
</div>
</div>
<!-- </p-panel> -->
</form>
</p-dialog>
<!-- Add New Item To Inventory Ends -->


I would like to request you please ask your friend to subscribe my channel.

[developerui]

have you implimented the header directive ? in this video?

[VJ-kmko]

it's really nice video. please share source code with me.

[maherbensaid]

Good job, can you please share the source code on github?

[tzadiko]

Why are you emailing each person individually? Just put the code on github and post the link?? Also, maybe you should activate your Windows ;)