Angular2 CRUD App – with JSON, PHP

0
134

Introduction:
In this post, explained a example on the Angular 2 CRUD(Create, Read, Update and Delete) opearations using PhP.
Following prerequisites are required.
1. Angular 2 Basis setup
2. MAMP Server(WAMP for windows) to run PhP code.

 

In this example, we will read list of records from JSON file and then show it in a table. User can search,edit or delete the records. User also can create new record. Create two directories inside angular 2 app  folder named Dashboard  and User .

Create a interface to define user records properties like below and export it.

User/user.ts:

Keep the following files on MAMP server and run the server.

htdocs/www/userData.json:

htdocs/www/user.php:

Create a template and component for dashboard page is like below.
Dashboard/dashboard.component.html:

In the below dashboard component, we have injected the service named UserService and accessing respective service methods. We have added this
service to reduce the component logic.

Dashboard/dashboard.component.ts:

Create a user service file and add methods to do CRUD operations by Http call.
User/user.service.ts:

Create a template and component for create user and edit user like below.
User/createUser.component.html:

User/createUser.component.ts:

User/editUser.component.html:

User/editUser.component.ts:

Add above created components to the dashboard page on condition based like below.
Updated Dashboard/dashboard.component.html:

LEAVE A REPLY

Please enter your comment!
Please enter your name here