Acho que faltou limpar a lista no localstorage também

Olá Pedro, tudo bem com você?

Peço desculpas pela demora em obter um retorno.

Para limpar dados do localStorage, podemos utilizar o método removeItem(), que permite remover um item específico armazenado no armazenamento local do navegador, no caso do curso, a chave itens.

No arquivo lista-de-compra-service.ts, o método ficará da seguinte maneira:

limparLocalStorage(){
    localStorage.removeItem('itens');
  }

Além disso, vale ressaltar que como iremos limpar o LocalStorage, não precisaremos atualizar a lista a cada alteração da ferramenta através do método ngDoCheck, que é chamado frequentemente durante o ciclo de detecção de alterações do Angular. Portanto, nosso código em app-component.ts não terá a classe ngDoCheck, como mostro abaixo:

import { Component, DoCheck, OnInit } from '@angular/core';
import { Item } from './interfaces/iItem';
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 {
  title = 'app-lista-de-compras';
  listaDeCompra! : Array<Item>;
  itemParaSerEditado! : Item;

  constructor(private listaService: ListaDeCompraService) { }

  ngOnInit(): void {
   this.listaDeCompra = this.listaService.getListaDeCompra();
   this.listaService.atualizarLocalStorage();
  }

  editarItem(item: Item){
    this.itemParaSerEditado = item;
  }
  deletarItem(id: number){
    const index = this.listaDeCompra.findIndex((item)=>item.id === id);
    this.listaDeCompra.splice(index, 1);
  }
  limparLista(){
    this.listaService.limparLocalStorage();
    this.listaDeCompra = [];
  }
}

Deixo também o código completo do arquivo lista-de-compra-service.ts:

import { Item } from 'src/app/interfaces/iItem';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ListaDeCompraService {

  private listaDeCompra: Item[];
  constructor() {
    this.listaDeCompra = JSON.parse(localStorage.getItem('itens')|| '[]');
  }

  getListaDeCompra(){
    return this.listaDeCompra;
  }

  criarItem(nomeDoItem: string){
    const id = this.listaDeCompra.length + 1
    const item : Item = {
      id: id,
      nome: nomeDoItem,
      data: new Date().toLocaleString('pt-BR'),
      comprado: false
    }
    return item
  }

  adicionarItemNaLista(nomeDoItem: string){
    const item = this.criarItem(nomeDoItem)
    this.listaDeCompra.push(item);
    this.atualizarLocalStorage();
  }

  editarItemDaLista(itemAntigo: Item, nomeEditadoDoItem: string){
    const itemEditado : Item = {
      id: itemAntigo.id,
      nome: nomeEditadoDoItem,
      data: itemAntigo.data,
      comprado: itemAntigo.comprado
    }
    const id = itemAntigo.id;
    this.listaDeCompra.splice(Number(id)-1, 1, itemEditado);
    this.atualizarLocalStorage();
  }

  limparLocalStorage(){
    localStorage.removeItem('itens');
  }

  atualizarLocalStorage(){
    localStorage.setItem('itens', JSON.stringify(this.listaDeCompra));
  }

}

Após as alterações, salve o código e volte ao navegador na rota http://localhost:4200/. Clique no botão Limpar Lista, para excluir os dados da lista, ao atualizar a página a lista será iniciada vazia, devido a remoção dos itens do localstorage. Como mostrado no GIF abaixo:

Espero ter ajudado. Continue mergulhando em conhecimento e não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!