How to update the same component with different params in Angular

Question

I've done the tour of heroes from angular. It works perfectly.

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. Image

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.

This is the code of the hero-detail.component.html

<app-dashboard></app-dashboard>
<div *ngIf="hero">
<h2>{{ hero.name | uppercase }} Details</h2>
        <div><span>id: </span>{{hero.id}}</div>
        <div>
          <label>name:
          </label>
                <div><span>name: </span>{{hero.name}}</div>

        </div>
<button (click)="goBack()">go back</button>
<button (click)="save()">save</button>
</div>

hero detail class

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());
     }      
}

The dashboard code

<a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </a>

The router is the same as the tutorial.

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'heroes', component: HeroesComponent },
  { path: 'detail/:id', component: HeroDetailComponent }
];

A bad solution:

After research a little i found the possibility to add the (click)="reloadRoute()" to the link, but this one refresh all the page.

<a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}"  (click)="reloadRoute()">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </a>

Github

DeborahK · Accepted Answer · 2017-12-14 17:03:49Z

4

Instead of using the snapshot, subscribe to the params. This is what mine looks like:

ngOnInit(): void {
    this.route.params.subscribe(
        params => {
            const id = +params['id'];
            this.getProduct(id);
        }
    );
}

answered Dec 14, 2017 at 17:03

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ValRob Over a year ago

I am trying this, but it doesn't show me anything now:

ngOnInit(): void { 	  // const id = +this.route.snapshot.paramMap.get('id');	   	  // this.taskService.getTask(id) 	  //   .subscribe(task => this.task = task); 	  this.route.params.subscribe( 	      params => { 	          const id = +params['id']; 	          this.taskService.getTask(id); 	      } 	  ); 	}

DeborahK Over a year ago

Are there any errors in the console? If you add a console.log inside the subscribe, are you getting the Id?

ValRob Over a year ago

i dont know how, but this work:

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

Collectives™ on Stack Overflow

How to update the same component with different params in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related