3. Inyección de dependencias (DI)

3.2. Crear el componente que inyecta el servicio

Creamos el componente:

ng generate component componentes/lista-colores --standalone --skip-tests

Aquí ya estamos aplicando inyección de dependencias: el componente no crea los datos, los pide al servicio

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ClientesService } from '../../services/clientes.service';

@Component({
  selector: 'app-lista-colores',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h2>Inyección de dependencias (colores)</h2>

    @for (color of colores; track color) {
      <p>{{ color }}</p>
    }
  `
})
export class ListaColoresComponent {
  // Inyección moderna
  private clientesService = inject(ClientesService);

  colores = this.clientesService.getColores();
}