Wishlist in angular?

Question

Angular

I'm new to angular, so sorry for the dumb question.
Went through the Tour of Heroes tutorial , using angular-in-memory-web-api and here is the question.
Accordingly, the display of heroes on the main screen is available
Viewing a single hero by id is

import { Hero }         from '../hero';
import { HeroService }  from '../hero.service';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.scss' ]
})
export class HeroDetailComponent implements OnInit {
  @Input() hero!: Hero;

  constructor(
    private route: ActivatedRoute,
    private heroService: HeroService,
    private location: Location
  ) {}

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

  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id')!;
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }

  goBack(): void {
    this.location.back();
  }

 save(): void {
    this.heroService.updateHero(this.hero)
      .subscribe(() => this.goBack());
  }
}

Removal too.

But how to implement a wish list? Click on the button under the name of the hero, let's say "add to wishlist" => take his ID, redirect to a new page, referred to as "wishlist" => already in it, capturing the adishnik, parses the info and displays each hero whose button is pressed "Add to Wishlist" button.
Can you help?

Answer 1

1. Взял готовый код из туториала
   
2. Создал liked-component
   
3. Добавил ссылку Liked Heroes в app-component
   
4. Добавил кнопку save to your liked heroes в details-component
   
5. Изменил интерфейс Hero путём добавления liked: boolean
   
6. Изменил массив HEROES, добавив каждому объекту liked: false
   
7. Что и для чего я поменял в методах, надеюсь, сами разберётесь
   

Решение не лучшее, зато очень доступное :)