Delete method in Angular is not deleting

Question

I am trying to do a really basic CRUD in my first Angular application and I am having issues with the Delete method. There are no errors, the id parameter is passed correctly throughout the application (checked in the console), but the item is not being deleted. Basically nothing happens.

The "database" is a file named notes.json inside the assets folder of my application. It contains multiple notes like this:

[
    {
      "id": "id1",
      "title": "First note",
      "description": "This is the description for the first note",
      "categoryId": "1"
    }
]

These notes are put in the UI in the note.component.html in mat-cards.

<div *ngFor="let note of notes">
  <mat-card class="note">
    <mat-card-header>
      <mat-card-title>
        {{ note.title }}
      </mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>
        {{ note.description }}
      </p>
    </mat-card-content>
    <button><mat-icon (click)="deleteNote(note.id)">delete</mat-icon></button>
  </mat-card>
</div>

Then, in note.component.ts, the deleteNote method is called. As I said above, the note.id parameter is passed correctly.

@Component({
  selector: 'app-note',
  templateUrl: './note.component.html',
  styleUrls: ['./note.component.scss'],
})
export class NoteComponent implements OnInit, OnChanges {
  @Input() selectedCategoryId: string;
  notes: Note[];

  constructor(private noteService: NoteService) { }

  ngOnInit() {
    this.noteService.getNotes().subscribe((result) => this.notes = result);
  }

  ngOnChanges() {
    if (this.selectedCategoryId) {
      this.noteService.getFilteredNotes(this.selectedCategoryId).subscribe((result) => this.notes = result);
    }
  }

  deleteNote(id:string){
    console.log(id);
    this.noteService.deleteNote(id).subscribe(data => {console.log(data);});
  }
}

export interface Note {
  id: string;
  title: string;
  description: string;
  categoryId: string;
}

The service is, therefore called and performs the following:

@Injectable()
export class NoteService {

  readonly baseUrl = "https://localhost:4200";
  readonly httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
    })
  };
  deleteNote(id:string)
  {
    return this.httpClient.delete(this.baseUrl + "/notes/" + id, this.httpOptions).subscribe(data => {console.log(data)});
  }

}

Therefore, what is going wrong? My gut feeling tells me that I am using the subscribe method wrong, but I tried doing it differently and still getting the same result.

Answer 1

So the problem is that you send the request to remove that note from the backend, however in the frontend your list is never updated.

deleteNote(id:string){
    console.log(id);

    let indexToBeRemoved = this.notes.findIndex( (note) => {note.id === id});
   
    if (indexToBeRemoved != -1){
    this.notes.splice(indexToBeRemoved, 1);
    }
    
    this.noteService.deleteNote(id).subscribe(data => {console.log(data);});
  }
}

If you want to be 100% safe, check the response from the backend that shows the delete was successful and then proceed with removing the element from the frontend