Skip to main content

​
Overview

The GeneroListComponent provides administrators with a view of all literary genres in the system. It allows creating new genres, editing existing ones, and deleting genres that are not associated with any books.

​
Component Metadata

@Component({
  selector: 'app-genero-list',
  standalone: true,
  imports: [CommonModule, RouterLink],
  templateUrl: './genero-list.html',
  styleUrls: ['./genero-list.css'],
})
Selector: app-genero-list Imports:
  • CommonModule - Angular common directives
  • RouterLink - Router navigation for creating and editing
Template: ./genero-list.html

​
Properties

​
generos

generos: Genero[] = []
Array containing all literary genres in the system. Each genre object includes:
  • id: Genre identifier
  • nombre: Genre name (e.g., “Ficción”, “Ciencia Ficción”, “Romance”)

​
Injected Services

private generoService = inject(GeneroService)
  • GeneroService - Handles all genre-related API operations

​
Lifecycle Hooks

​
ngOnInit

ngOnInit(): void {
  this.cargarGeneros();
}
Called when the component initializes. Immediately loads all genres from the backend.

​
Methods

​
cargarGeneros

cargarGeneros(): void
Fetches all genres from the GeneroService and populates the generos array:
  • On success: Updates generos array and logs the data to console
  • On error: Logs error message to console with prefix “Error al cargar géneros:”
This method is called on initialization and after deleting a genre to refresh the list.

​
eliminarGenero

eliminarGenero(id: number): void
Deletes a genre from the system:
  1. Displays confirmation dialog “¿Estás seguro de eliminar este género?”
  2. If confirmed, calls GeneroService.delete() with the genre ID
  3. On success:
    • Reloads the genre list by calling cargarGeneros()
    • Shows success alert “Género eliminado correctamente”
  4. On error:
    • Logs error to console
    • Shows error alert “No se pudo eliminar el género. Es probable que existan libros asociados a él.”
The error handling specifically mentions associated books because the backend prevents deleting genres that are referenced by existing books. Parameters:
  • id - The numeric ID of the genre to delete

​
Full Source Code

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { GeneroService } from '../../../core/services/genero';
import { Genero } from '../../../core/models/genero';

@Component({
  selector: 'app-genero-list',
  standalone: true,
  imports: [CommonModule, RouterLink],
  templateUrl: './genero-list.html',
  styleUrls: ['./genero-list.css'],
})
export class GeneroListComponent implements OnInit {
  // Inyección de dependencias
  private generoService = inject(GeneroService);

  generos: Genero[] = [];

  ngOnInit(): void {
    this.cargarGeneros();
  }

  cargarGeneros(): void {
    this.generoService.getAll().subscribe({
      next: (data) => {
        this.generos = data;
        console.log('Géneros cargados:', data);
      },
      error: (err) => {
        console.error('Error al cargar géneros:', err);
      },
    });
  }

  eliminarGenero(id: number): void {
    if (confirm('¿Estás seguro de eliminar este género?')) {
      this.generoService.delete(id).subscribe({
        next: () => {
          // Recarga la lista
          this.cargarGeneros();
          alert('Género eliminado correctamente');
        },
        error: (err) => {
          console.error('Error al eliminar:', err);
          // Advertencia
          alert(
            'No se pudo eliminar el género. Es probable que existan libros asociados a él.'
          );
        },
      });
    }
  }
}
  • Genero - Genre data structure

Build docs developers (and LLMs) love

Get started for freeTalk to us