Angular CRUD

1. Setting Up Angular Environment

Before building CRUD, ensure your Angular environment is set up.

Install Angular CLI:
‍
bash

npm install -g @angular/cli

‍
1.  Create a new Angular project:
bash

ng new angular-crud-app
cd angular-crud-app

‍
‍2. Install the required libraries for HTTP communication:‍
bash

npm install @angular/common @angular/core

2. Angular CRUD Operations

Create (POST)

The Create operation involves sending data to a REST API using an HTTP POST request.

Example: Service Code

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private apiUrl = 'https://example.com/api/users';

  constructor(private http: HttpClient) {}

  createUser(user: any): Observable<any> {
    return this.http.post(this.apiUrl, user);
  }
}

Example: Component Code

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-create-user',
  template: `
    <form (submit)="onSubmit()">
      <input [(ngModel)]="name" placeholder="Name" />
      <input [(ngModel)]="email" placeholder="Email" />
      <button type="submit">Create</button>
    </form>
  `,
})
export class CreateUserComponent {
  name: string = '';
  email: string = '';

  constructor(private userService: UserService) {}

  onSubmit() {
    const user = { name: this.name, email: this.email };
    this.userService.createUser(user).subscribe((response) => {
      console.log('User Created:', response);
    });
  }
}

Read (GET)

The Read operation retrieves data from a REST API using an HTTP GET request.

Example: Service Code

getUsers(): Observable<any[]> {
  return this.http.get<any[]>(this.apiUrl);
}

‍Example: Component Code

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }} - {{ user.email }}</li>
    </ul>
  `,
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe((data) => {
      this.users = data;
    });
  }
}

Update (PUT)

The Update operation modifies existing data via an HTTP PUT request.

Example: Service Code

updateUser(id: number, user: any): Observable<any> {
  return this.http.put(`${this.apiUrl}/${id}`, user);
}

Example: Component Code

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-update-user',
  template: `
    <form (submit)="onSubmit()">
      <input [(ngModel)]="id" placeholder="User ID" />
      <input [(ngModel)]="name" placeholder="Name" />
      <input [(ngModel)]="email" placeholder="Email" />
      <button type="submit">Update</button>
    </form>
  `,
})
export class UpdateUserComponent {
  id: number = 0;
  name: string = '';
  email: string = '';

  constructor(private userService: UserService) {}

  onSubmit() {
    const user = { name: this.name, email: this.email };
    this.userService.updateUser(this.id, user).subscribe((response) => {
      console.log('User Updated:', response);
    });
  }
}

Delete (DELETE)

The Delete operation removes data using an HTTP DELETE request.

Example: Service Code

deleteUser(id: number): Observable<any> {
  return this.http.delete(`${this.apiUrl}/${id}`);
}

‍Example: Component Code

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-delete-user',
  template: `
    <input [(ngModel)]="id" placeholder="User ID" />
    <button (click)="onDelete()">Delete</button>
  `,
})
export class DeleteUserComponent {
  id: number = 0;

  constructor(private userService: UserService) {}

  onDelete() {
    this.userService.deleteUser(this.id).subscribe(() => {
      console.log('User Deleted');
    });
  }
}

Notable libraries and example projects

Let explore some examples to better understand the concept of the CRUD software:

1. Angular App - Example CRUD application built with Angular for learning purposes
2. Remult - Full-stack CRUD framework for Angular and other frontends with integrated backend support
3. Forms-Angular - Angular framework for building CRUD apps with dynamic form generation based on Mongoose schemas