Skip to main content

​
Overview

The RegistrosServiceTs is an Angular injectable service that manages the restaurant’s seafood dish catalog. It provides methods to retrieve, display, and delete dish records (registros), maintaining an in-memory data store of 6 signature seafood dishes.
This service is provided at the root level (providedIn: 'root'), making it a singleton available throughout the application.

​
Data Structure

​
Registro Interface

Each dish record follows the Registro interface structure:
​
id
string
required
Unique identifier for the dish
​
nombre
string
required
Name of the seafood dish (e.g., “Ceviche de Pescado”)
​
foto
string
required
URL to the dish’s photo (using Unsplash or Bing image CDN)
​
observaciones
string[]
required
Array of ingredients or preparation notes for the dish

​
Default Dish Catalog

The service initializes with 6 signature seafood dishes: 
private registros: Registro[] = [
  {
    id: '1',
    nombre: 'Ceviche de Pescado',
    foto: 'https://images.unsplash.com/photo-1535399831218-d5bd36d1a6b3?auto=format&fit=crop&w=500&q=60',
    observaciones: [
      'Pescado fresco',
      'Limón',
      'Cebolla morada',
      'Chile serrano',
    ],
  },
  {
    id: '2',
    nombre: 'Cóctel de Camarón',
    foto: 'https://images.unsplash.com/photo-1559715745-e1b33a271c8f?auto=format&fit=crop&w=500&q=60',
    observaciones: [
      'Camarón pacotilla',
      'Salsa cátsup especial',
      'Aguacate',
      'Galletas saladas',
    ],
  },
  {
    id: '3',
    nombre: 'Tacos de Pescado',
    foto: 'https://tse3.mm.bing.net/th/id/OIP.mIuAEWgQERs2OuHLMhfrlAHaE8?pid=Api&P=0&h=180',
    observaciones: [
      'Pescado capeado',
      'Tortilla de harina',
      'Col morada',
      'Aderezo de chipotle',
    ],
  },
  {
    id: '4',
    nombre: 'Aguachile Verde',
    foto: 'https://images.unsplash.com/photo-1565557623262-b51c2513a641?auto=format&fit=crop&w=500&q=60',
    observaciones: [
      'Camarón crudo',
      'Jugo de limón',
      'Chile serrano',
      'Pepino',
      'Cebolla',
    ],
  },
  {
    id: '5',
    nombre: 'Filete al Mojo de Ajo',
    foto: 'https://images.unsplash.com/photo-1580476262798-bddd9f4b7369?auto=format&fit=crop&w=500&q=60',
    observaciones: [
      'Filete de mojarra',
      'Ajo dorado',
      'Arroz blanco',
      'Ensalada fresca',
    ],
  },
  {
    id: '6',
    nombre: 'Pulpo Zarandeado',
    foto: 'https://tse2.mm.bing.net/th/id/OIP.-Wv38sBv-5EvZ9_ux_fOjQHaE8?pid=Api&P=0&h=180',
    observaciones: [
      'Tentáculos de pulpo',
      'Adobo especial',
      'A las brasas',
      'Papas gajo',
    ],
  },
];

​
Methods

​
getRegistros()

Retrieves all dish records from the service.
​
returns
Registro[]
Returns a shallow copy of the entire registros array
getRegistros(): Registro[]
The method returns a spread copy ([...this.registros]) to prevent direct mutation of the internal array, following immutability best practices.

​
getRegistro()

Retrieves a single dish record by its ID.
​
registroId
string
required
The unique identifier of the dish to retrieve
​
returns
Registro | undefined
Returns a shallow copy of the matching registro object, or undefined if not found
getRegistro(registroId: string): Registro | undefined
This method returns a spread of the found object, which means if no registro is found, it will return an empty object {} rather than undefined. Consider adding null checks in your components.

​
deleteRegistro()

Removes a dish record from the catalog by filtering it out of the array.
​
registroId
string
required
The unique identifier of the dish to delete
​
returns
void
This method does not return a value
deleteRegistro(registroId: string): void
The deletion is permanent for the current session. Since the service uses an in-memory store, deleted records will reappear when the application restarts.

​
addRegistro()

This method is currently a placeholder with no implementation.
addRegistro() {}
To implement this method, you would typically accept a Registro object and add it to the internal array: 
addRegistro(registro: Registro) {
  this.registros.push(registro);
}

​
Service Injection

The service can be injected into any Angular component or service: 
import { RegistrosServiceTs } from './home/home.service';

@Component({
  // component configuration
})
export class MyComponent {
  constructor(private registrosService: RegistrosServiceTs) {}
}

​
Best Practices

The service returns shallow copies of data using the spread operator (...), preventing direct mutation of the internal state. This is a good practice for maintaining data integrity.
With providedIn: 'root', Angular ensures only one instance of RegistrosServiceTs exists throughout the application, maintaining consistent state across all components.
Currently, the service uses in-memory storage. For production applications, consider:
  • Integrating with a backend API
  • Using Ionic Storage for local persistence
  • Implementing NgRx or another state management solution
Always type your component properties with the Registro interface to leverage TypeScript’s type checking and IDE autocomplete features.

Registro Interface

Learn about the Registro data model structure

HomePage Component

See how the home page displays all registros

DetalleRegistroPage

View and delete individual dish records

Angular Services

Official Angular documentation on services

Build docs developers (and LLMs) love

Get started for freeTalk to us