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..
You made me happy, I really appreciate your comment. It will inspire me to more helpful videos and articles. good luck with your software development career :)
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.
As a side note, I noticed that when I went back to submit a new user for registration, the app was broken due to the addition of the hidden input field. Hidden input is hidden from view but still part of the dom/form and is still sent in the request as part of the form. When sending the form value for a new user, there will be a conversion error for the "null" EmployeeID. If this value isn't sent as part of the POST request, it is fine because the ID is an identity seed on the database. To fix this issue, I simply put the *ngFor="employeeService.selectedEmployee.EmployeeID != null" on the hidden input. That way if there is an employeeID the input field will show, and will be removed if the employeeID is null.
input control with type as 'hidden' will not visible. Me personally didn't have this submit problem before. you can download the demo project for testing this issue.
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!
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... 😊
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!
very very nice video i really enjoy ur video the best ,it has really helped in most of the issues have been having in my angular app projects, tumbs up to you
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 'rxjs/add/operator/toPromise'; import {HttpClient,HttpHeaders} from '@angular/common/http'; 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
Hi Friend, Thank you very much for sharing this video, I found this video very useful for me. I am new in Angular and Web API, I appreciate your work.. :)
I really like your tutorials! This is the second one I follow. Quick question: if I want to deploy it to the cloud. Any suggestions on how to do it as it is both backend and front-end?
thanks again so much for this tutorial!!! i was wondering if it's possible for a person to publish this full project (Angular frontend & Web API Project & SQL Server Database) to Azure App Services...i have uploaded apps to Azure App Services before...but it was always one solution with one project inside of it (vs. 1 Web API Project and 1 Angular Project with an external SSMS database)...my one project would always include the database I was using...(considering that i always make my databases/tables within Visual Studio using SSDT (SQL Server Data Tools)).....i wasnt sure on how publishing to Azure would work considering that you made your database in SSMS and not using SSDT within Visual Studio...so I wasnt sure if that would affect overall deployment/publishing to Azure.....also the Angular front end references the "localhost" file path to access the API Controller... i wasnt sure if i could keep the same local host reference when publishing to Azure..... any advice/direction/or reference would be greatly appreciated....
Hi, Thanks for the video, but wanted to know how we can check duplicate data(duplicate emails, phone numbers) before we insert? Also was wondering how to validate email through regular expression
Hi, Thanks for your great tutorials. As a beginner I do not quite understand about prerequisites to start this project. It seems there is also ASP.NET Core and you use ASP.NET Web API and management studio. Please explain about it. Thanks. Nyoman, Bali, Indonesia
Hi, first of all, excelent tutorial and thank you very much for taking the time to share and teach. I have an issue , on click of edit , the form is not showing the values. I have the same code as you, in console log is printing well the object assign into the var, but inputs of form is notshowing the info, i have with NGMODEL = Employeeservice.selectedEmployee.FirstName.. as you in the form . What could be?
Thank you so much, you really help me. I have a question Can I have angular and web api in the same project?? What would be the inconvience of doing this?
Great video. But I got an error at 42:51. Can't resolve 'rxjs/add/operator/map' and Can't resolve 'rxjs/add/operator/toPromise' . in an Angular 6 project. Any help would be appreciated. ty.
Hello, I need your help to know for below 2 questions. I implemented the project according to your instructions in the tutorial. But what if I want to add this function. 1. The solution should provide a hyperlink that automatically searches Google for the user's name. 1. The solution should provide a hyperlink that automatically searches Google maps for the user's address.
Thanks for the video. Is der a way to generate swagger api (controller action methods) in angular project, so that we no need to type the URL in any get/post service call. Directly we can call the method from the respective path in service class.
Great tutorial. Can u make a video of a MEAN stack application. There are a few online but they are not as nearly well done and easy to understand as your series of videos are!!! You are doing a superb job!!! I have a few problems though with this application though... I have been over the video at least 8 times and checked the code over and over again but do not see any difference in my code as opposed to yours but there are a few things that I cannot get to work properly. 1. You never test the reset button for functionality. Whenever I press the reset button it adds a new record to the database with null values. Since you did not test it during the building of the app then I am not sure why I cannot get it to work. EDIT After comparing your code to my own, I found that in the employee.component.html file I did not give the reset button the code of
Thanks for the time you spent on this comment. I will try Mean stack application. thoughts on your points. 1. need to test on my system. 2. I will follow your suggestion in upcoming tutorials. 3. to avoid the problem you can import BrowserAnimationsModule in app.module.ts import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Reset is working as expected . I guess , please watch out for click event of Register button.If it is adding a record then surely it is bound to Post function
How did you shorten your directory path to $$ just using 'PROMPT $$' in terminal of visual studio code. What Environment Variable have you added to make it work?
Hi... Congratulations your courses are awesome. Iam watching the video "Angular 4 CRUD With Web API". Iam Using Visual Studio comunity 2017 and SqlServer 2017, I have problem creating controll, I recieve the message "ld not load file or assembly entityframework 5.0"... Can you help me please??
Thanks for the tutorial however on visual studio code my terminal doese not have the node terminal therefore does not recognize the ng new angularCRUD part. How can i go about it
What is the purpose of headers and requestOption why we use it? What happen if we run http method without using headers and request method? Please elaborate!!
goo.gl/bPcyXW : Buy me a Coffee
bit.ly/3QiQOYw : Same Topic But Updated Version
bit.ly/3zktP96 : Login, User Registration, Authorization, etc (Angular & .Net Core API)
bit.ly/47yygKq : (Angular & .Net Core API) More Videos
bit.ly/4fSmgXP : React & .Net Core API Videos
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..
You made me happy, I really appreciate your comment.
It will inspire me to more helpful videos and articles.
good luck with your software development career :)
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.
As a side note, I noticed that when I went back to submit a new user for registration, the app was broken due to the addition of the hidden input field. Hidden input is hidden from view but still part of the dom/form and is still sent in the request as part of the form. When sending the form value for a new user, there will be a conversion error for the "null" EmployeeID. If this value isn't sent as part of the POST request, it is fine because the ID is an identity seed on the database. To fix this issue, I simply put the *ngFor="employeeService.selectedEmployee.EmployeeID != null" on the hidden input. That way if there is an employeeID the input field will show, and will be removed if the employeeID is null.
input control with type as 'hidden' will not visible. Me personally didn't have this submit problem before. you can download the demo project for testing this issue.
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!
Thanks for your kind words. I'm glad you found the video helpful.
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... 😊
Thanks for your support, It will definitely inspire me to upload new tutorials.
Awesome learning CRUD using Angular + Web Api... Great!!!
This web application will "blow up" Loved that comment!
Would really love to see some more videos on Angular 4. So for your videos are really helpful. Thanks a lot.
Sure.
Hello, I am from Pakistan, Loved your style, Learn a lot, Keep it up, need more videos !!
thanks for the support.
Great tutorial.
With these constructs polished , we can make an enterprose app easily
Thanks for the knowledge sharing.
keep learning and sharing
Really Awesome course! everything about it is impressive, you can add like slides, to summarize the steps, topics and the progress of the course!
Thanks for the suggestion. Yes, I have to consider that.
What a awesome video sir, you have clear my all of doubt in a single video, thank you soooooooooooooo much sir...
Thanks for your kind words.
I SOLVED MY CORS PROBLEM REACT+WEBAPI THANKS TO YOU...HOLLY HELL THAT WAS HARD
Im here again to say that this video saved a friend of mine with cors problems...thanks
thanks for such an amazing video.I always admire people who share such a usefull informations without expecting any benefit.
thanks for the comment.
Very Informative Video! Going through this tutorial for the second time to get a little better understanding of the concepts.
Glad you found the video helpful.
Thanks for your wonderful feedback.
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!
you are great sir.. i just flow your method and create angular app in angular 6 thank you so much to making this video. ;)
thanks for the comment and support.
Thank you so much!! I was able to learn a lot by watching the video as well as simultaneously doing the project....
I'm glad, you found the video helpful.
Very thorough and professional. Thanks for this tutorial.
Thank You.
Excellent Video Presentation...Great Job! It helps many...
Glad you found the video helpful.
Just change the button type = "reset" e.g. Reset
It will work, and save some extra effords..
Hello, instead use css property 'text-align:center', you can use the class 'text-center', more clean... nice tutorial
Thank you so much for posting this. Great video. Everything works as shown.
Glad you found the video helpful.
Very much useful. Great Effort.
glad you found the video helpful.
very very nice video i really enjoy ur video the best ,it has really helped in most of the issues have been having in my angular app projects, tumbs up to you
thank you for the wonderful feedback! :) We're humbled.
awesome tutorial. covered almost everything in 1 hour :).
Thanks for your Comment Nikhil.
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 'rxjs/add/operator/toPromise';
import {HttpClient,HttpHeaders} from '@angular/common/http';
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
Love it and loved the Malayalam accent!
very helpful, the guide was smooth and understandable. thank you
glad you found the video helpful.
the video is very helpful .. thanks for the upload.. keep up the good work
Glad to hear it helped.
You are simply awesome. Well explained. Thank you.
glad you found the video helpful.
here is the updated version : th-cam.com/video/jYvkMv7LzCw/w-d-xo.html
Hi Friend, Thank you very much for sharing this video, I found this video very useful for me. I am new in Angular and Web API, I appreciate your work.. :)
Thanks for your kind words.
excellent tutorial. great fluency.
Thank you. Happy Coding :)
u were awesome
i found it very useful thnks.....
I really like your tutorials! This is the second one I follow. Quick question: if I want to deploy it to the cloud. Any suggestions on how to do it as it is both backend and front-end?
We can try that in another tutorial.
Exelent.... !!! This tutorial is great, I needed it.
thanks for the comment.
we have re-uploaded the same with latest angular version here : th-cam.com/video/jYvkMv7LzCw/w-d-xo.html
Really the video is awesome...Kindly make the video with Java Spring Boot
Glad you found the video helpful.
May be I can consider your suggestion later.
Thanks so much!, greetings from Peru
My Pleasure.
This video helped me a lot, thank you very much!
Very good explanantion. just wanted to know, why you say Employee==>> "Embloyee", Import==>>"Imbort" , Component==>>"Combonent".
:), I admit my accent problem. I'll work on that too. thanks for the comment.
@@CodAffection, not an issue dude.. .. we are able to understand you, it matters. Thanks for the video it helped me a lot.
Well Explanation .please make video on Webapi authentication and authorization also thank you in advance
Awesome tutorial,thanks a lot.......
glad you found the video helpful. let me know if you have any angular/ asp.net topic to be discussed.
thank you so much...Really help full video..worked successfully..and plz help me how to insert mousehover data to database by using Post method
Thanks, a lot of help .. Could you please let me know what was alternative method instead of using CORS
Good one. Do you have the same application with Telerik Kendo Grid ?
Sorry, No.
Wonder full ... please keep on doing
Thanks for the comment.
thanks again so much for this tutorial!!! i was wondering if it's possible for a person to publish this full project (Angular frontend & Web API Project & SQL Server Database) to Azure App Services...i have uploaded apps to Azure App Services before...but it was always one solution with one project inside of it (vs. 1 Web API Project and 1 Angular Project with an external SSMS database)...my one project would always include the database I was using...(considering that i always make my databases/tables within Visual Studio using SSDT (SQL Server Data Tools)).....i wasnt sure on how publishing to Azure would work considering that you made your database in SSMS and not using SSDT within Visual Studio...so I wasnt sure if that would affect overall deployment/publishing to Azure.....also the Angular front end references the "localhost" file path to access the API Controller... i wasnt sure if i could keep the same local host reference when publishing to Azure..... any advice/direction/or reference would be greatly appreciated....
Thanks for this awesome tutorial! Really helped me a lot!
Glad you found the video helpful.
if you make playlist of tutorials sequentially it would more helpful.. but still good to see
Thanks for your suggestion. I will consider that.
Very helpful video's bro..Thank You
Hi, Thanks for the video, but wanted to know how we can check duplicate data(duplicate emails, phone numbers) before we insert? Also was wondering how to validate email through regular expression
Thank you. explained very nice. Any application deploy videos? like IIS?
not yet.
please make it, looking forward. How to consume WCF service in Angular 4 ? any videos?
Very nice!! Congrats man
insightful tutorial, do we have a video tutorial on angularJS, Web api and couchdb?
Hi,
Thanks for your great tutorials. As a beginner I do not quite understand about prerequisites to start this project. It seems there is also ASP.NET Core and you use ASP.NET Web API and management studio.
Please explain about it.
Thanks.
Nyoman,
Bali, Indonesia
Hi, first of all, excelent tutorial and thank you very much for taking the time to share and teach. I have an issue , on click of edit , the form is not showing the values. I have the same code as you, in console log is printing well the object assign into the var, but inputs of form is notshowing the info, i have with NGMODEL = Employeeservice.selectedEmployee.FirstName.. as you in the form . What could be?
Thank you so much, you really help me.
I have a question Can I have angular and web api in the same project?? What would be the inconvience of doing this?
thanks for the comment. Yes you can.
well explained.Thank You so much for this video.
Thanks, man ! great tutorial!
Is there any reason why you refer service in HTML form.did you check with Ng prod build
Nice tutorial, Great efforts. Keep it UP! .Thank you.
Glad you found the video helpful.
Thank You so much for this video.
Great video. But I got an error at 42:51. Can't resolve 'rxjs/add/operator/map' and Can't resolve 'rxjs/add/operator/toPromise' . in an Angular 6 project. Any help would be appreciated. ty.
www.academind.com/learn/javascript/rxjs-6-what-changed/
Well explained 👍
Hello, I need your help to know for below 2 questions. I implemented the project according to your instructions in the tutorial. But what if I want to add this function.
1. The solution should provide a hyperlink that automatically searches Google for the user's name.
1. The solution should provide a hyperlink that automatically searches Google maps for the user's address.
Please reply to the above questions.
this video very helpful.tnq so much
Thanks for the video. Is der a way to generate swagger api (controller action methods) in angular project, so that we no need to type the URL in any get/post service call. Directly we can call the method from the respective path in service class.
So Angular now has been transformed into a server-side framework?? If so, why I should use it instead of MVC/WebAPI + jQuery/AngularJS ?
Since I am bignner so this video is prefect for me thanks :)
Glad you find the video helpful.
since :D
amazing startup video. how do we call the rest service if this is a single solution(angular2+MVC) in visual studio. ?
Very helpful. Thanks.
This is a great video tutorial!! Thanks a lot
My Pleasure, Happy Coding
thank you for this helpful video 👍
Very helpful, thank you!
It's awesome. Great job.!
Thx!!! You saved my life!!!!
you are welcome.
superb. like a pro...
Great tutorial, thank you
love this video.thank u very much
Awesome video's bro..Thank you.
Great tutorial. Can u make a video of a MEAN stack application. There are a few online but they are not as nearly well done and easy to understand as your series of videos are!!! You are doing a superb job!!!
I have a few problems though with this application though...
I have been over the video at least 8 times and checked the code over and over again but do not see any difference in my code as opposed to yours but there are a few things that I cannot get to work properly.
1. You never test the reset button for functionality. Whenever I press the reset button it adds a new record to the database with null values. Since you did not test it during the building of the app then I am not sure why I cannot get it to work. EDIT
After comparing your code to my own, I found that in the employee.component.html file I did not give the reset button the code of
Thanks for the time you spent on this comment. I will try Mean stack application.
thoughts on your points.
1. need to test on my system.
2. I will follow your suggestion in upcoming tutorials.
3. to avoid the problem you can import BrowserAnimationsModule in app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
when I tested reset button, I don't any problem.
Reset is working as expected .
I guess , please watch out for click event of Register button.If it is adding a record then surely it is bound to Post function
MEAN Stack CRUD Operations : th-cam.com/video/UYh6EvpQquw/w-d-xo.html
thanks , very good and nice
Glad you found the video helpful.
Hello thank you very much.
How can I set the focus in an input?
the crud operation is through Queries(insert,update,delete)
or through entity framework?
entity framework.
@@CodAffection how to perform crud opertion by using query (insert update delete ) in webservice and angular
How did you shorten your directory path to $$ just using 'PROMPT $$' in terminal of visual studio code.
What Environment Variable have you added to make it work?
not added any particular Environment Variables ?
Hi... Congratulations your courses are awesome. Iam watching the video "Angular 4 CRUD With Web API". Iam Using Visual Studio comunity 2017 and SqlServer 2017, I have problem creating controll, I recieve the message "ld not load file or assembly entityframework 5.0"... Can you help me please??
GREAT VIDEO, REALLY THANK YOU...
Thanks for the video. I find this video very helpful .Can you please create a video on server side pagination with angular 5 and web api ?
I'll try.
Awsome dude very helpful :)
thanks for the comment.
Great tutorial.
Great tutorial. Can u make a video of how to debug and test Angular js application
thanks for the comment. I'll try later.
Thanks for the tutorial however on visual studio code my terminal doese not have the node terminal therefore does not recognize the ng new angularCRUD part.
How can i go about it
What is the purpose of headers and requestOption why we use it?
What happen if we run http method without using headers and request method?
Please elaborate!!
I m having a problem! it is giving me an error when I import Observable in 43:00. It says: has no exported member Observable... But I did it already
It is due to new version of rxjs.
instead explaining the changes here. I'll upload a new video with new versions.
www.academind.com/learn/javascript/rxjs-6-what-changed/
do you have roles and permissions video about angular with web api? ty
Thank u so much for this video
Glad you found the video helpful.
Thank you very much!
Please upload videos for Routing and authentication & Authorization in Angular 4
sure. I am working on it. Hope I can publish within one week.
Thank you a lot :) this tuto is helpful
Great Job!
Hello @CodAffection , can u please make video on Difference between All versions 6/7/8/9