Step by Step Guide to Creating an Angular 15 CRUD App with Material UI and JSON-Server

In this tutorial, we will walk through the process of creating a CRUD (Create, Read, Update, Delete) application using Angular 15, Material UI, and JSON-server. This tutorial will guide you step by step on how to set up the project, create the necessary components, and implement CRUD operations.

Prerequisites:

1. Basic knowledge of Angular, HTML, CSS, and TypeScript.
2. Node.js and npm installed on your machine.
3. Angular CLI installed globally.

Step 1: Set up the project

1. Create a new Angular project by running the following command in your terminal:

   ng new angular-crud-material-ui

2. Change directory to the newly created project:

   cd angular-crud-material-ui

3. Install Material UI and Angular Material dependencies:

   ng add @angular/material

4. Install JSON-server to create a mock backend for our application:

   npm install -g json-server

Step 2: Create JSON-server mock data

1. Create a new file named db.json in the root of your project.

2. Add mock data to the db.json file to simulate a RESTful API. For example:

   {
   "posts": [
   { "id": 1, "title": "Post 1", "content": "Lorem ipsum dolor sit amet" },
   { "id": 2, "title": "Post 2", "content": "Consectetur adipiscing elit" }
   ]
   }

3. Start the JSON-server by running the following command:

   json-server --watch db.json

Step 3: Create Angular components

1. Generate four new components for the CRUD operations:

   ng generate component post-list
   ng generate component post-add
   ng generate component post-edit
   ng generate component post-detail

2. Create a service to interact with the JSON-server:

   ng generate service post

Step 4: Implement CRUD operations

1. Update the post service to make HTTP requests to the JSON-server. Use the Angular HttpClient module to send GET, POST, PUT, and DELETE requests.

2. Implement the CRUD operations in the post-list, post-add, post-edit, and post-detail components.

3. Display the posts in the post-list component using Material UI components like tables or cards.

4. Create forms in the post-add and post-edit components to add new posts and edit existing posts.

5. Implement navigation between components using Angular Router.

Step 5: Testing the application

1. Start the Angular development server by running the following command:

   ng serve

2. Open your browser and navigate to http://localhost:4200 to see the application running.

3. Test the CRUD operations by adding, editing, and deleting posts.

Congratulations! You have successfully created a CRUD application using Angular 15, Material UI, and JSON-server. You can further customize the application by adding features like authentication, pagination, or search functionality. Thank you for following this tutorial, and happy coding!