Sharing data between two pages upon clicking button Angular

Question

Im trying to get the hero details to show on hero-details page upon clicking on the button but I cant seem to figure out how to make it work. When I click on the button Im able to show the details on hero-list page but if I try to reroute it using routerLink I cant get the data to show. Right now Im just using <app-hero-details [hero]="selectedHero" > so I can have the data display when the hero button is clicked. I guess it has something to do with this [hero]="selectedHero".

heroes-list.components.html

<h1>Hero List</h1>
<ul>
    <!--Displays a list of hero names-->
    <li *ngFor="let hero of heroes">
        <button type="button" (click)="onSelect(hero)" [class.selected]="hero === selectedHero"  >
            
          <span class="name">{{hero.name}}</span >
          
        </button>
      </li>
</ul>

<!-- just used to test hero-details page routing -->
<!-- <p><a routerLink="/hero-details" routerLinkActive="active">Click here</a></p> -->

<!-- just used to test 404/wildcard page routing -->
<!-- <p><a routerLink="/fakeLink" routerLinkActive="active">Click here</a></p> -->


<!-- this will show the data on this page-->
<app-hero-details [hero]="selectedHero" ></app-hero-details>

heroes-list.component.ts

import { Component, OnInit } from '@angular/core';
import { BackendService } from '../services/backend.service';
import { Hero } from '../types/Hero';

@Component({
  selector: 'app-heroes-list',
  templateUrl: './heroes-list.component.html',
  styleUrls: ['./heroes-list.component.css']
})
export class HeroesListComponent implements OnInit {

  selectedHero?: Hero;

  heroes: Hero[] = [
  ];

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

  constructor(private backend: BackendService) { }

  async ngOnInit(): Promise<void> {
    // Gets a list of heroes to display
    this.heroes = await this.backend.getHeroes();
  }

}

hero-details.components.html

<p>Hero Details section</p>
<!-- <p><a routerLink="" routerLinkActive="active">Click here to go back to Hero List</a></p>
<h1>Hero Details page</h1> -->
<div *ngIf="hero" >


    <!-- the hero details that will be displayed upon clicking on name  -->

    <h2 >{{hero.name | uppercase}} Details</h2>
    
    <div><span>Id: </span>{{hero.id}}</div>
    <div><span>Level: </span>{{hero.level}}</div>
    <div><span>Class: </span>{{hero.class}}</div>

  
    
</div>

hero-details.components.ts

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
import { Hero } from '../types/Hero';

@Component({
  selector: 'app-hero-details',
  templateUrl: './hero-details.component.html',
  styleUrls: ['./hero-details.component.css']
})
export class HeroDetailsComponent implements OnInit {
  @Input() hero: Hero | undefined;
  

  constructor(
    private route: ActivatedRoute,
  ) { }

  ngOnInit(): void {
  }



}

Answer 1

Does your backend return anything? Show us the backend and show what it is returning. Also I would advise to refactor ngOnInit() to not be async function. Refactor logic away from ngOnInit to a new function and have ngOnInit call out the said new function.

Otherwise it looks like it should work.

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

async getHeroes() {
    // Gets a list of heroes to display
    this.heroes = await this.backend.getHeroes();
}

Example: https://stackblitz.com/edit/heroes-list-fjdq6g?file=src%2Fapp%2Fheroes%2Fheroes.component.ts