crud operation code observable component angular

Nanu answered on February 1, 2024 Popularity 1/10 Helpfulness 3/10

answer crud operation code observable component angular

related crud operation code observable service angular

crud operation code observable component angular

Comment

// 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
      });
    }
  }
}

Popularity 1/10 Helpfulness 3/10 Language typescript

Source: chat.openai.com

Tags: angular crud observable operation typescript

Link to this answer
Share Copy Link

Contributed on Feb 01 2024

Nanu

0 Answers Avg Quality 2/10

Closely Related Answers

crud operation code observable service angular

Comment

// 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}`);
  }
}

Popularity 1/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: crud operation html service observable angular

Link to this answer
Share Copy Link

Contributed on Feb 01 2024

Nanu

0 Answers Avg Quality 2/10

crud operation code observable component angular

Contents

More Related Answers

crud operation code observable component angular

Closely Related Answers

crud operation code observable service angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.