angular_injectable_hero_service_with_component_dependency_injection.ts

1import { Injectable } from '@angular/core';
2import { Component } from '@angular/core';
3import { CommonModule } from '@angular/common';
4
5// The Service
6@Injectable({
7  providedIn: 'root',
8})
9export class HeroService {
10  getHeroes() {
11    return [
12      { id: 1, name: 'Dr. Nice' },
13      { id: 2, name: 'Bombasto' },
14      { id: 3, name: 'Magneta' },
15      { id: 4, name: 'Tornado' }
16    ];
17  }
18}
19
20// The Component
21@Component({
22  selector: 'app-hero-list',
23  standalone: true,
24  imports: [CommonModule],
25  template: `
26    <h2>Hero List</h2>
27    <ul>
28      <li *ngFor="let hero of heroes">
29        {{ hero.name }}
30      </li>
31    </ul>
32  `,
33})
34export class HeroListComponent {
35  heroes: { id: number; name: string }[] = [];
36
37  // Injecting the service via the constructor
38  constructor(private heroService: HeroService) {
39    this.heroes = this.heroService.getHeroes();
40  }
41}