[Sugestão] Faltou persistir a exclusão no local storage

Não muito relacionado ao tema do curso, mas é um bom ponto para refletir sobre informações duplicadas.

Se recarregarem a página após excluir um item, irão reparar que o mesmo não é excluído da lista. O problema é que temos duas listas de comprar em nosso app. Uma no serviço (lista-de-compra.service.ts) e outra em nosso app component (app.component.ts).

No momento da exclusão, estamos excluindo apenas da lista do app component (app.component.ts) e estamos esquecendo do serviço. O correto mesmo seria centralizar essa lista de compras em um contexto, estado compartilhado...

Mas apenas para resolver o problema da persistência no local storage, fiz as mudanças abaixo:
app.component.ts

import { Component, DoCheck, OnInit } from '@angular/core';
import { Item } from './interfaces/Item';
import { ListaDeCompraService } from './service/lista-de-compra.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, DoCheck {
  ...
  atualizarListaCompras() {
    this.listaCompras = this.listaDeCompraService.getListaDeCompra();
  }

  deletarItem(itemId: number) {
    this.listaDeCompraService.deletarItemDaLista(itemId);
    this.atualizarListaCompras();
  }
...
}

lista-de-compra.service.ts

import { Injectable } from '@angular/core';
import { Item } from './../interfaces/Item';

@Injectable({
  providedIn: 'root',
})
export class ListaDeCompraService {
  ...
  deletarItemDaLista(itemId: number): void {
    this.listaDeCompra = this.listaDeCompra.filter(
      (item) => item.id !== itemId,
    );
  }
...
}