Angular 15 CRUD Application Tutorial

Here’s an example of how you can create a simple CRUD application in Angular 15:

1. Setting up the project: Use the Angular CLI to create a new Angular 15 project.

Copy codeng new my-crud-app

2. Creating a RESTful API: You can use a simple JSON file as a mock API for this example. Create a db.json file in the src folder and add some data to it.

Copy code{
  "employees": [
    {
      "id": 1,
      "name": "John Doe",
      "email": "[email protected]",
      "phone": "555-555-5555"
    },
    {
      "id": 2,
      "name": "Jane Doe",
      "email": "[email protected]",
      "phone": "555-555-5555"
    }
  ]
}

3. Building the user interface: Create a new component employees and generate the following files: employees.component.ts, employees.component.html and employees.component.css. In the employees.component.html file, create a table to display the employees’ data and a button to add a new employee.

Copy code<table>
  <tr *ngFor="let employee of employees">
    <td>{{employee.name}}</td>
    <td>{{employee.email}}</td>
    <td>{{employee.phone}}</td>
    <td>
      <button (click)="editEmployee(employee)">Edit</button>
      <button (click)="deleteEmployee(employee)">Delete</button>
    </td>
  </tr>
</table>
<button (click)="addEmployee()">Add Employee</button>

4. Implementing the CRUD logic: In your employees.component.ts file, import the HttpClient module to make HTTP requests. Use the ngOnInit lifecycle hook to fetch the employees’ data from the db.json file and store it in a variable employees.

Copy codeimport { HttpClient } from '@angular/common/http';

export class EmployeesComponent implements OnInit {
  employees: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('/src/db.json').subscribe(data => {
      this.employees = data.employees;
    });
  }

  addEmployee() {
    // code to add a new employee
  }

  editEmployee(employee) {
    // code to edit an employee
  }

  deleteEmployee(employee) {
    // code to delete an employee
  }
}

5. Add the EmployeesComponent to the app.module.ts file and the routing module to navigate between the different parts of the application.

This is a basic example of how you can create a CRUD application in Angular 15, in a real-world application you need to consider security, data validation, error handling and use a more robust way for storing data.

6. Testing and Deployment: Once your application is complete,