This repository contains project demonstrating CRUD operation in Angular 2
TypeScript HTML JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.vscode v1 Sep 2, 2016
src v1 Sep 2, 2016
.gitignore version 2 Sep 5, 2016
package.json v1 Sep 2, 2016
tsconfig.json v1 Sep 2, 2016

Running the Application

Step 1

Create a table with schema shown as below. Give same column names with the cases. Id – string (PK) Title – String Status – String Insert some initial data in the table such that on running application will be loaded with some tasks. Make sure to insert done or pending as the value of status.

Step 2


Create a REST API which will perform CRUD operation on the table. You can create REST service using any development stack of your choice. Just make sure to follow standard of REST and all operations like PUT, POST, DELETE, and GET will be performed on the same URL.

If you wish to create ASP.NET Web API, my article on same may help you.

You may want to enable CORS also on the API, such that you can perform CRUD operation without Cross-Origin Request error. To enable CORS in ASP.NET Web API, my article on same may help you.

I would recommend to enable CORS on the global level.

Step 3

In the project open src/app/shared/data.service.ts file. In this file change value of apiUrl with the URL of Web API created by you.

apiUrl : string = "";

Step 4

Running the Application

  1. Install Node.js

  2. Run npm install to install app dependencies

  3. Run npm start to start the server and launch the app