CODEWITHSUNDEEP
angulartypescriptangular-routerlink
Roque Orts
Roque Orts

Reputation: 360

Angular routerlink complex object as param

Good evening,

I'd like to know the best way to pass a complex object using [routerLink] directive, and how to read it.

ie: 

complexObject = {
  x : 'ok',
  y: { 
        a: 2,
       b: 'test'
      },
}

<a [routerLink]="['/example/example-test', complexObject ]">

this.activatedRoute.paramMap.subscribe(complexObject => {
complexObject.get('x') // ok
complexObject.get('y') // The nested object 'y' is a string like [object object]
 }

Thanks in advance

Upvotes: 0

Views: 1241

Answers (2)

Paridhi Kasliwal
Paridhi Kasliwal

Reputation: 64

Good Evening, One of the way to pass nested object in the routerLink directive is by using JSON.stringify().

ngOnInit() {
 this.obj = JSON.stringify(this.complexObject);
}

Convert the complex object by using JSON.stringify() method and pass the object in RouterLink directive.

<a [routerLink]="['/categories', { complexObject: obj} ]">CLICK</a>

Here we will pass the stringified object to the routerLink directive.

this.activatedRoute.paramMap.subscribe(params => {
  const complexObject = JSON.parse(params.get('complexObject'));
});

Extract the object passed in route by using JSON.parse() method.

Upvotes: 1

Roque Orts
Roque Orts

Reputation: 360

Good morning,

This is the solution that I could found:

<a [routerLink]="['/example/example-test', { complexObject: complexObject} ]">

this.route.paramMap.subscribe(params => {
            const complexObject = JSON.parse(params.get('complexObject'))
        })

Regards

Upvotes: 2

Related Questions