title: How to update the same component with different params in Angular
body: <p>I've done the <a href="https://angular.io/tutorial" rel="nofollow noreferrer">tour of heroes</a> from angular. It works perfectly. </p>
  
  <p>Now I want to put the dashboard component in the hero detail view. So it shows me the top of heroes, and after that, the hero detail view.
  <a href="https://i.stack.imgur.com/yGDt1.png" rel="nofollow noreferrer">Image</a> </p>
  
  <p>I have a Router link that loads the same component, but with different params. I want to know, what to do so that when I click on any element from the dashboard this one load a different hero. </p>
  
  <p><strong>This is the code of the hero-detail.component.html</strong></p>
  
  <pre><code>&lt;app-dashboard&gt;&lt;/app-dashboard&gt;
  &lt;div *ngIf="hero"&gt;
  &lt;h2&gt;{{ hero.name | uppercase }} Details&lt;/h2&gt;
          &lt;div&gt;&lt;span&gt;id: &lt;/span&gt;{{hero.id}}&lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;name:
            &lt;/label&gt;
                  &lt;div&gt;&lt;span&gt;name: &lt;/span&gt;{{hero.name}}&lt;/div&gt;
  
          &lt;/div&gt;
  &lt;button (click)="goBack()"&gt;go back&lt;/button&gt;
  &lt;button (click)="save()"&gt;save&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>hero detail class</strong></p>
  
  <pre><code>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 =&gt; this.hero = hero);
      }
  
      goBack(): void {
        this.location.back();
      }
      save(): void {
         this.heroService.updateHero(this.hero)
           .subscribe(() =&gt; this.goBack());
       }      
  }
  </code></pre>
  
  <p><strong>The dashboard code</strong></p>
  
  <pre><code>&lt;a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}"&gt;
      &lt;div class="module hero"&gt;
        &lt;h4&gt;{{hero.name}}&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  </code></pre>
  
  <p><strong>The router is the same as the tutorial.</strong> </p>
  
  <pre><code>const routes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'heroes', component: HeroesComponent },
    { path: 'detail/:id', component: HeroDetailComponent }
  ];
  </code></pre>
  
  <p><strong>A bad solution:</strong></p>
  
  <p>After research a little i found the possibility to add the <em>(click)="reloadRoute()"</em> to the  link, but this one refresh all the page. </p>
  
  <pre><code>&lt;a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}"  (click)="reloadRoute()"&gt;
      &lt;div class="module hero"&gt;
        &lt;h4&gt;{{hero.name}}&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  </code></pre>
  
  <p><a href="https://github.com/josuevalrob/tour-of-heroes" rel="nofollow noreferrer"><strong>Github</strong></a></p>