src/app/heroes/heroes.component.css

@@ -1,66 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.heroes {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 15em;
-}
-
-.heroes li {
-  display: flex;
-}
-
-.heroes button {
-  flex: 1;
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: 0;
-  border-radius: 4px;
-  display: flex;
-  align-items: stretch;
-  height: 1.8em;
-}
-
-.heroes button:hover {
-  color: #2c3a41;
-  background-color: #e6e6e6;
-  left: .1em;
-}
-
-.heroes button:active {
-  background-color: #525252;
-  color: #fafafa;
-}
-
-.heroes button.selected {
-  background-color: black;
-  color: white;
-}
-
-.heroes button.selected:hover {
-  background-color: #505050;
-  color: white;
-}
-
-.heroes button.selected:active {
-  background-color: black;
-  color: white;
-}
-
-.heroes .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #405061;
-  line-height: 1em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-
-.heroes .name {
-  align-self: center;
-}

src/app/heroes/heroes.component.html

@@ -1,18 +1,6 @@
-<h2>My Heroes</h2>
+<h2>{{hero.name | uppercase}} Details</h2>
-<ul class="heroes">
+<div><span>id: </span>{{hero.id}}</div>
-  <li *ngFor="let hero of heroes">
+<div>
-    <button type="button" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+  <label for="name">Hero name: </label>
-      <span class="badge">{{hero.id}}</span>
+  <input id="name" [(ngModel)]="hero.name" placeholder="name">
-      <span class="name">{{hero.name}}</span>
-    </button>
-  </li>
-</ul>
-
-<div *ngIf="selectedHero">
-  <h2>{{selectedHero.name | uppercase}} Details</h2>
-  <div>id: {{selectedHero.id}}</div>
-  <div>
-    <label for="hero-name">Hero name: </label>
-    <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
-  </div>
 </div>

src/app/heroes/heroes.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { Hero } from '../hero';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import {HEROES} from '../mock-heroes';
 
 @Component({
   selector: 'app-heroes',
@@ -10,15 +9,9 @@ import {HEROES} from '../mock-heroes';
   styleUrls: ['./heroes.component.css'],
   imports: [CommonModule, FormsModule]
 })
-
+export class HeroesComponent {
-export class HeroesComponent { //определяем класс со списком героев
+  hero: Hero = {
-  heroes = HEROES;
+    id: 1,
-  selectedHero?: Hero;
+    name: 'Windstorm'
-
+  };
-  onSelect(hero: Hero): void {
-  this.selectedHero = hero;
-  }
-
 }
-
-

src/app/mock-heroes.ts

@@ -1,13 +0,0 @@
-import { Hero } from './hero'; //список героеев
-
-export const HEROES: Hero[] = [
-  { id: 12, name: 'Dr. Nice' },
-  { id: 13, name: 'Bombasto' },
-  { id: 14, name: 'Celeritas' },
-  { id: 15, name: 'Magneta' },
-  { id: 16, name: 'RubberMan' },
-  { id: 17, name: 'Dynama' },
-  { id: 18, name: 'Dr. IQ' },
-  { id: 19, name: 'Magma' },
-  { id: 20, name: 'Tornado' }
-];