Angular 4 CRUD With Web API

🍒 Related Videos

Related Commands
✪ NuGet Command For WebAPI CORS :
Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.3
✪ NuGet Command For Re-Installing Web API Core :
Install-Package Microsoft.AspNet.WebApi.Core -Version 5.2.3
✪ npm command for toastr
npm install ngx-toastr --save

📂 GitHub Repository

💖 Channel Support

💌 For Business Inquiries

🚶‍♂️ Follow us

---
Angular 4 CRUD Operation With Asp.Net Web API
Step by step tutorial to implement CRUD Operations ( Insert Update and Delete ) Using Asp.Net Web API and SQL Server Entity Framework.

Discussed Topics
0:00 Introduction
0:01 Quick Demo
1:50 Create Web API Project
4:26 Add ADO.NET Entity Model
5:55 Add Web API Controller
11:50 Create Angular 4 Application
27:52 Design Employee Form
38:53 Form Validation
41:35 INSERT Operation
47:10 Resolve CORS in Web API
47:31 waiting for your feedback!
52:35 Install & Use ngx-toastr

#Angular #WebAPI #CodAffection

[rogersmith]

thanks so much for your knowledge... i watched your videos while i was in college... now i am a junior developer...and i still come by time to time to see if you have new updated videos... i am so thankful/grateful that you have started including Angular with WebAPI...because honestly this is the future... because you can always have Angular as the front end framework...and then just simply have Angular receive data from any backend WEB API of choice (rather ASP.NET API, ROR API, Python API, Java API, etc)...thanks so much for your knowledge...be blessed always..

[giobongio]

I'm a super-newbie to Angular and this video is helping a lot to understand the basis of interfacing with WebAPI. Thanks so much for sharing both the code and the step to step explanation!

[davidfaulkner]

This was amazing. I am new to Angular 6 and have taken a wonderful online course; however, that course used firebase which meant that it lacked the api and sql server steps covered in this tutorial. I searched for a few days before finding this video. It shows enabling CORS, connecting to MS SQL Server, and it also shows developing API independently (Visual Studios) of the Angular Application (Visual Studio Code). Well worth the watch.

[samirubhatt]

After KudVenkat... i really liked this video... very easy to understand... come up with testing of the same for the files that you deleted. Good job... 😊

[MicheleStrom]

Here's a little puzzle I'm having with the Reset functionality (start around minute 36): When you enter in the reset code's first iteration, ( before you change the code to use an If statement), instead of making all the Model values blank, try setting it to some value. For example,
...
FirstName: Bob,
LastName : Smith,
..
For me, this executes just fine: It will clear the form and put in your First and Last name in the first two fields.


NOW go ahead and change the code, as the video asks, to use an IF statement to check if there was a form passed in *before* executing form.reset().


A) In the case where there was no form (meaning our reset code was called from ngOnInit) - the code executes as expected. Your name will appear in the first and last name fields, and the rest will be the usual placeholder values.


B) In the case where there IS a form, meaning you hit Reset, the form.reset() line inside the IF statement *will execute*... but then nothing else in the method executes! Your name will NOT appear, instead you will get the usual placeholder value in those fields.


I'd be tempted to say that NgForm's reset() code stops everything else from executing, except for the fact that everything else DOES execute when you don't have the if statement. If anyone would like to try this, please let me know what you think, or if you get a different result. Thanks!

[sagarkumar]

For those that are looking for post and further method supported by Angular 8 here is the code.








import { Observable } from "rxjs";
import 'rxjs/add/operator/map';
import




postEmployee(emp : Employee){
var body = JSON.stringify(emp);
return this.http.post('url', body, {
headers: new HttpHeaders({ "Content-Type": "application/json" })
}).map(x => JSON.stringify(x));
}

For those facing any issue regarding the old version of rxjs, just use the below command to support backward compatibility in you project folder :


npm install --save rxjs-compat

[ms]

Just change the button type = "reset" e.g. <button type="reset" class="btn btn-lg btn-block btn-danger">Reset</button>
It will work, and save some extra effords..

[deependrajoshi]

Awesome learning CRUD using Angular + Web Api... Great!!!

[nzjemountfort]

This web application will "blow up" Loved that comment!

[chandansr]

Would really love to see some more videos on Angular 4. So for your videos are really helpful. Thanks a lot.

[Liev]

I SOLVED MY CORS PROBLEM REACT+WEBAPI THANKS TO YOU...HOLLY HELL THAT WAS HARD

[SumeetSharma]

Great tutorial.
With these constructs polished, we can make an enterprose app easily
Thanks for the knowledge sharing.
keep learning and sharing

[EnesAckoglu]

thanks for such an amazing video.I always admire people who share such a usefull informations without expecting any benefit.

[RajSingh-mldp]

What a awesome video sir, you have clear my all of doubt in a single video, thank you much sir...

[mehmoodayaztravel]

Hello, I am from Pakistan, Loved your style, Learn a lot, Keep it up, need more videos !!

[mahfoudharous]

Really Awesome course! everything about it is impressive, you can add like slides, to summarize the steps, topics and the progress of the course!

[abhijeetjoshi]

Thank you so much!! I was able to learn a lot by watching the video as well as simultaneously doing the project....

[jorgetejeda]

Hello, instead use css property 'text-align:center', you can use the class 'text-center', more clean... nice tutorial

[MicheleStrom]

Very Informative Video! Going through this tutorial for the second time to get a little better understanding of the concepts.

[gianlazzarini]

Very thorough and professional. Thanks for this tutorial.