// person.component.ts

import { Component, OnInit } from '@angular/core';

import { Person } from './person.model';

import { PersonService } from './person.service';

​

@Component({

  selector: 'app-person',

  templateUrl: './person.component.html',

})

export class PersonComponent implements OnInit {

  people: Person[] = [];

  newPerson: Person = new Person(0, '', 0);

  selectedPerson: Person | null = null;

​

  constructor(private personService: PersonService) {}

​

  ngOnInit(): void {

    this.loadPeople();

  }

​

  loadPeople(): void {

    this.personService.getPeople().subscribe((people) => {

      this.people = people;

    });

  }

​

  addPerson(): void {

    this.personService.addPerson(this.newPerson).subscribe(() => {

      this.loadPeople();

      this.newPerson = new Person(0, '', 0);

    });

  }

​

  removePerson(id: number): void {

    this.personService.deletePerson(id).subscribe(() => {

      this.loadPeople();

    });

  }

​

  selectPerson(person: Person): void {

    this.selectedPerson = { ...person }; // Make a copy to avoid two-way binding issues

  }

​

  updatePerson(): void {

    if (this.selectedPerson) {

      this.personService.updatePerson(this.selectedPerson).subscribe(() => {

        this.loadPeople();

        this.selectedPerson = null; // Deselect after updating

      });

    }

  }

}

// person.service.ts

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs';

import { Person } from './person.model';

​

@Injectable({

  providedIn: 'root',

})

export class PersonService {

  private apiUrl = 'https://your-api-url'; // Replace with your API endpoint

​

  constructor(private http: HttpClient) {}

​

  getPeople(): Observable<Person[]> {

    return this.http.get<Person[]>(`${this.apiUrl}/people`);

  }

​

  getPerson(id: number): Observable<Person> {

    return this.http.get<Person>(`${this.apiUrl}/people/${id}`);

  }

​

  addPerson(person: Person): Observable<Person> {

    return this.http.post<Person>(`${this.apiUrl}/people`, person);

  }

​

  updatePerson(person: Person): Observable<Person> {

    return this.http.put<Person>(`${this.apiUrl}/people/${person.id}`, person);

  }

​

  deletePerson(id: number): Observable<void> {

    return this.http.delete<void>(`${this.apiUrl}/people/${id}`);

  }

}