Breaking News: Grepper is joining You.com. Read the official announcement!

crud array of objects angular service

Add Answer

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

answer crud array of objects angular service

related crud array of objects component angular

related crud array of objects html angular

crud array of objects angular service

Comment

// person.service.ts
import { Injectable } from '@angular/core';
import { Person } from './person.model';

@Injectable({
  providedIn: 'root',
})
export class PersonService {
  private people: Person[] = [];

  getPeople(): Person[] {
    return this.people;
  }

  addPerson(person: Person): void {
    this.people.push(person);
  }

  removePerson(id: number): void {
    this.people = this.people.filter((person) => person.id !== id);
  }

  updatePerson(updatedPerson: Person): void {
    const index = this.people.findIndex((person) => person.id === updatedPerson.id);
    if (index !== -1) {
      this.people[index] = updatedPerson;
    }
  }
}

Popularity 2/10 Helpfulness 1/10 Language typescript

Source: chat.openai.com

Tags: angular crud service typescript

Link to this answer
Share Copy Link

Contributed on Feb 01 2024

Nanu

0 Answers Avg Quality 2/10

Closely Related Answers

crud array of objects component angular

Comment

// person.component.ts
import { Component } from '@angular/core';
import { Person } from './person.model';
import { PersonService } from './person.service';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
})
export class PersonComponent {
  people: Person[] = [];
  newPerson: Person = new Person(0, '', 0);
  selectedPerson: Person | null = null;

  constructor(private personService: PersonService) {
    this.people = personService.getPeople();
  }

  addPerson(): void {
    this.personService.addPerson(new Person(this.people.length + 1, this.newPerson.name, this.newPerson.age));
    this.newPerson = new Person(0, '', 0); // Clear the form
  }

  removePerson(id: number): void {
    this.personService.removePerson(id);
  }

  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);
      this.selectedPerson = null; // Deselect after updating
    }
  }
}

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: chat.openai.com

Tags: typescript angular crud

Link to this answer
Share Copy Link

Contributed on Feb 01 2024

Nanu

0 Answers Avg Quality 2/10

crud array of objects html angular

Comment

<!-- person.component.html -->
<div>
  <h2>People</h2>

  <ul>
    <li *ngFor="let person of people">
      {{ person.name }} ({{ person.age }} years old)
      <button (click)="removePerson(person.id)">Remove</button>
      <button (click)="selectPerson(person)">Edit</button>
    </li>
  </ul>

  <h3>Add Person</h3>
  <label>Name: <input [(ngModel)]="newPerson.name" /></label>
  <label>Age: <input [(ngModel)]="newPerson.age" type="number" /></label>
  <button (click)="addPerson()">Add</button>

  <h3>Edit Person</h3>
  <div *ngIf="selectedPerson">
    <label>Name: <input [(ngModel)]="selectedPerson.name" /></label>
    <label>Age: <input [(ngModel)]="selectedPerson.age" type="number" /></label>
    <button (click)="updatePerson()">Update</button>
  </div>
</div>

Popularity 3/10 Helpfulness 1/10 Language typescript

Source: chat.openai.com

Tags: crud angular typescript html

Link to this answer
Share Copy Link

Contributed on Feb 01 2024

Nanu

0 Answers Avg Quality 2/10

crud array of objects angular service

Contents

More Related Answers

crud array of objects angular service

Closely Related Answers

crud array of objects component angular

crud array of objects html angular

Grepper

Documentation

Social

Legal

Contact

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