Angular 4 - CRUD Example App

Angular 4 - CRUD Example App

Angular 4 example project:

Angular 4 example application:

Angular 4 sample code:

This is the full application created in Angular 4 with WEB API and Entity Framework and SQL Server.

If it is not clear then please watch video it will give you full details.

1. Angular 4 CRUD Operations With WebAPI, Entity Framework Using Visual Studio 2015
2. Create an Angular 4 project in Visual Studio 2015 by using below link or
3. https://angular.io/guide/visual-studio-2015 OR
4. My Video How to run Angular 4 with visual studio 2015
5. Create a Web API project  in same Solution.
6. Add a WebAPI controller with action using Entity Framework.
7. Modify your controller to use Entity Framework dbcontext.
8. Now let us jump on Angular 4 side.
9. First go to src/app folder and create two folder Components,Services.
10. Add a component in which you would like to perform CRUD operations.
11. Create Angular service under service folder to support your CRUD operations.
12. Add Below Methods in Angular service:
13. 
    
1. After Above Steps ,please subscribe service method on newly created component respective button click event as below for insert method


14. 
15. After Above Steps ,please subscribe service method on newly created component respective button click event as below for insert method:
16. 
17. 1. Below is the HTML for above mentioned insert method and all control used in insert client.
    2. 
    3. Please watch my full video in YouTube Link:
    4. https://youtu.be/LiBhhYboZ9o
    5.