How to pass object between components when switching between routes Angular

Question

I have a component which looks like this

<div class="animal">
  <a routerLink="/animal/{{animal.id}}">
  <div>
    ...
  </div>
  </a>
</div>

It gets animal object from parent component, which is just a list of childs.

@Input() animal;

When I click on it I'm moving to another component where I want to display some propreties from this clicked animal object.

I thought of create a service which will store this object but the problem is I don't know how to get only clicked object and not every object from the list.

All the help will be much appreciated.

there are two ways to pass value, path variables and query params check this answer: stackoverflow.com/a/48125257/4294381 — Saad Mehmood
– Saad Mehmood, Commented Oct 31, 2018 at 11:43

Sarthak Aggarwal · Accepted Answer · 2018-10-31 11:33:13Z

2

You can catch your parameters in your routed Component by using ActivatedRoute in angular

Your routing path :

const routes : Routes = [
  { 
    // Other routes
  },
  {
     path:'animal/:id'
     component : AnimalDetailsComponent
  }
]

animal-details.component.ts

constructor(private route : ActivatedRoute) {} 

ngOnInit(){
  this.route.params.subscribe((params)=>{
     console.log(params['id'])
  })
}

answered Oct 31, 2018 at 11:33

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

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

4 Comments

Person Over a year ago

Yeah but this way I'm getting an id and not the whole object

Sarthak Aggarwal Over a year ago

if you want to send whole object, you can either use EventEmitter or Subject or BehaviorSubject with the help of service. You can also make use of SessionStorage or localStorage for communication between components.

Person Over a year ago

Hm, I found this solution stackoverflow.com/a/39569933/5206428 which works but stops working if I refresh route on /animal/:id

Sarthak Aggarwal Over a year ago

SessionStorage and LocalStorage won’t have such issue

Rahul · Accepted Answer · 2018-10-31 11:50:02Z

0

Try using resolver Route Resolver Service - where you can do some action before the routing loads

 {
    path: '',
    component: Component,
    resolve: { service: Service },
  },

export class Service implements Resolve<object | string> {

  constructor() {
    }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<object | string> | Promise<object | string>  {
        return {};
    }

In your onInit you can read the data by injecting a ActivatedRoute service in your component constructor like this

constructor(private _activatedRoute: ActivatedRoute) {
    }

Code in Onint - this.variable = this._activatedRoute.snapshot.data["service"];

answered Oct 31, 2018 at 11:50

Rahul

2,1382 gold badges14 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to pass object between components when switching between routes Angular

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related