CRUD

Service

import { Injectable } from '@angular/core';
import { Firestore, collectionData } from '@angular/fire/firestore';
import {
  addDoc,
  collection,
  deleteDoc,
  doc,
  updateDoc,
} from 'firebase/firestore';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class FirestoreService {
  constructor(private firestore: Firestore) {} // Injektáld a Firestore-t ide

  // Az összes diák lekérdezése
  getAllStudents(): Observable<any[]> {
    const itemCollection = collection(this.firestore, 'students');
    return collectionData(itemCollection, { idField: 'id' });
  }

  // Új hozzáadása
  addStudent(firstName: string): Promise<void> {
    const itemCollection = collection(this.firestore, 'students');
    return addDoc(itemCollection, {
      firstName: firstName,
    }).then(() => {});
  }

  // Szerkesztés
  editStudent(id: string, firstName: string): Promise<void> {
    const studentDoc = doc(this.firestore, 'students', id);
    return updateDoc(studentDoc, {
      firstName: firstName,
    });
  }

  // Egy diák törlése azonosító alapján
  deleteStudent(id: string): Promise<void> {
    const studentDoc = doc(this.firestore, 'students', id);
    return deleteDoc(studentDoc);
  }
}

Component

import { CommonModule } from '@angular/common';
import { Component, ViewChild, inject } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { FirestoreService } from 'src/app/services/firestore.service';

interface Item {
  firstName: string;
}

@Component({
  selector: 'app-add-student',
  templateUrl: './add-student.component.html',
  styleUrls: ['./add-student.component.scss'],
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
})
export class AddStudentComponent {
  @ViewChild('nameInput', { static: false }) nameInputRef: any;
  isEditing = false;
  editingStudentId?: string;
  constructor(private studentService: FirestoreService) {}

  items$ = this.studentService.getAllStudents();

  loginForm = new FormGroup({
    firstName: new FormControl(),
  });

  onSubmit() {
    const firstNameValue = this.loginForm.get('firstName')?.value;
    if (!firstNameValue) {
      console.error('First name is required!');
      return;
    }
    if (this.isEditing && this.editingStudentId) {
      const studentId = '';
      this.studentService
        .editStudent(this.editingStudentId, firstNameValue)
        .then(() => {
          console.log('Edited student with ID: ' + studentId);
        });
      this.isEditing = false;
    } else {
      this.studentService.addStudent(firstNameValue);
    }
    this.onReset();
    this.isEditing = false;
  }

  onReset() {
    this.loginForm.reset({
      firstName: '',
    });
  }

  onEdit(id: string, firstName: string) {
    this.loginForm.setValue({ firstName: firstName });
    this.editingStudentId = id;
    this.isEditing = true;
    this.nameInputRef.nativeElement.focus();
  }

  onDelete(id: string) {
    this.studentService.deleteStudent(id).then(() => {
      console.log('Deleted student with ID: ' + id);
    });
  }

  onCancel() {
    this.loginForm.reset({
      firstName: '',
    });
    this.isEditing = false;
  }
}

Template

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div class="mb-3">
    <label for="firstName" class="form-label">First Name</label>
    <input
      formControlName="firstName"
      type="text"
      class="form-control"
      id="firstName"
    />
  </div>
  <div class="buttons">
    <button type="submit" class="btn btn-primary mr-3">Submit</button>
    <button *ngIf="isEditing" (click)="onCancel()" class="btn btn-dark">
      Cancel
    </button>
  </div>
</form>

<ul class="list-group">
  <li class="list-group-item" *ngFor="let item of items$ | async">
    {{ item.firstName }}
    <div class="buttons">
      <button
        (click)="onEdit(item.id, item.firstName)"
        type="button"
        class="btn btn-warning"
      >
        Edit
      </button>
      <button (click)="onDelete(item.id)" type="button" class="btn btn-danger">
        Delete
      </button>
    </div>
  </li>
</ul>