how can i pass an object to a component using angular routing?

Question

I have an "home" component where I iterate my mangas (mangas is an array of objects)
like this:

<div *ngFor="let manga of mangas">
  <h1> {{ manga.title }} </h1>
  <button routerLink="/manga/{{ manga.title }}"> read the manga </button>
</div>

(it's better than this but it's just to make an example)
so, how can I pass the entire "manga" object to the new route?
(i don't wanna to pass the entire array)

That is explained in the official angular documentation, the tour of heroes. angular.io/tutorial/toh-pt5#add-a-navigation-link-routerlink See it working here stackblitz.com/angular/… You can see how the routes are configured stackblitz.com/angular/… — Sergio Velasquez
– Sergio Velasquez, Commented Jul 6, 2021 at 18:30
@SergioVelasquez that is the standard way, but the question explicitly asked about passing the object instance to the route, not only an id. — EluciusFTW
– EluciusFTW, Commented May 7, 2024 at 10:03

Eliseo · Accepted Answer · 2021-07-06 18:54:58Z

8

if you want to pass an object to a router (not a simple parameter), you use "states" take a look this links

<div *ngFor="let manga of mangas">
  <a routerLink="/manga" [state]="manga">
</div>

And get it in OnInit. Normally, if you use state to get an object, you usually want that, if no object, router to "home", If your object manga has a property, mangaId you can use this information inside the subscription

  constructor(public activatedRoute: ActivatedRoute) {}
  
  ngOnInit() {
    this.activatedRoute.paramMap
      .pipe(map(() => window.history.state)).subscribe(res=>{
            console.log(res) //<--see thah you has an additional property:navigationId
            //you can check if you has passed an object really
            //If, e.g. your manga has a property mangaId<>0
            if (!res.mangaId) 
               router.navigate(['/home']                             
       })
  }

answered Jul 6, 2021 at 18:54

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

Sergio Velasquez Over a year ago

Your answer is correct but would you recommend such solution instead of using a data store / services?

Eliseo Over a year ago

Before Angular 7, I used a service. I think the only reason to use either method is which method is the most comfortable for you, but I cannot recommend one over the other.

Z . · Accepted Answer · 2021-07-06 18:16:47Z

3

You should not be passing the object itself in the route but rather the ID of the object and then retrieving the object from some type of datastore.

<div *ngFor="let manga of mangas">
  <h1> {{ manga.title }} </h1>
  <button routerLink="/manga/{{ manga.id }}"> 
     read the manga 
  </button>
</div>

In the spirit of a single page application, you might want to have a manga service (repository) that manages the collection of mangas.

answered Jul 6, 2021 at 18:16

Z .

12.8k2 gold badges34 silver badges59 bronze badges

Collectives™ on Stack Overflow

how can i pass an object to a component using angular routing?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related