final lesson Add services

src/app/app.component.html

@@ -1,2 +1,3 @@
 <h1>{{title}}</h1>
 <app-heroes></app-heroes>
+<app-messages></app-messages>

src/app/app.component.ts

@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
 import { HeroesComponent } from "./heroes/heroes.component";
+import { MessagesComponent } from "./messages/messages.component";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  imports: [HeroesComponent] 
+  imports: [HeroesComponent, MessagesComponent] 
 })
+
 export class App {
   title = 'Tour of Heroes';
 }

src/app/hero.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
 import { Observable, of } from 'rxjs';
+import { MessageService } from './message.service';
 
 @Injectable({
   providedIn: 'root'
@@ -11,9 +12,10 @@ export class HeroService {
 
   getHeroes(): Observable<Hero[]> {
   const heroes = of(HEROES);
+  this.messageService.add('HeroService: fetched heroes');
   return heroes;
-  }
-
-  constructor() { }
+}
+
+  constructor(private messageService: MessageService) { }
 }
 

src/app/heroes/heroes.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Hero } from '../hero';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { HeroService } from '../hero.service'; //новая библиотека добавлена вместо HEROES
 import { HeroDetailComponent } from '../hero-detail/hero-detail.component';
+import { MessageService } from '../message.service';
 
 @Component({
   selector: 'app-heroes',
@@ -12,24 +13,25 @@ import { HeroDetailComponent } from '../hero-detail/hero-detail.component';
   imports: [CommonModule, FormsModule, HeroDetailComponent]
 })
 
-export class HeroesComponent { //определяем класс со списком героев
-  heroes: Hero[] = [];
+export class HeroesComponent implements OnInit {
+
   selectedHero?: Hero;
 
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService, private messageService: MessageService) { }
+
+  ngOnInit(): void {
+    this.getHeroes();
+  }
+
   onSelect(hero: Hero): void {
-  this.selectedHero = hero;
+    this.selectedHero = hero;
+    this.messageService.add(`HeroesComponent: Selected hero Name=${hero.name}`);
   }
 
   getHeroes(): void {
-  this.heroService.getHeroes()
-      .subscribe(heroes => this.heroes = heroes);
+    this.heroService.getHeroes()
+        .subscribe(heroes => this.heroes = heroes);
   }
-  
-  ngOnInit(): void {
-  this.getHeroes();
-  }
-  constructor(private heroService: HeroService) {}
-
 }
-
-

src/app/message.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages = [];
+  }
+}

src/app/messages/messages.component.css

@@ -0,0 +1,19 @@
+/* MessagesComponent's private CSS styles */
+h2 {
+  color: #A80000;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+
+.clear {
+  color: #333;
+  background-color: #eee;
+  margin-bottom: 12px;
+  padding: 1rem;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+.clear:hover {
+  color: white;
+  background-color: #42545C;
+}

src/app/messages/messages.component.html

@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+  <button type="button" class="clear"
+          (click)="messageService.clear()">Clear messages</button>
+  <div *ngFor='let message of messageService.messages'> {{message}} </div>
+
+</div>

src/app/messages/messages.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { MessageService } from '../message.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-messages',
+  imports: [CommonModule ],
+  templateUrl: './messages.component.html',
+  styleUrl: './messages.component.css'
+})
+
+export class MessagesComponent {
+
+  constructor(public messageService: MessageService) {}
+
+}
+