How to get object in queryparams using Typescript?

In a button click i have function as,

  inviewMockupEvent(data) {
    console.log(data);
    this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });
  }
console.log(data) give the result as {mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432", …}

In navigated component i am getting the data as follows,

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      let data = params['data'];
      console.log(data);
      console.log(JSON.stringify(data));
    });

Where,

console.log(data) gives output as [object Object]
console.log(JSON.stringify(data)) gives output as "[object Object]"

And also,

console.log(data.mockup_id) gives result undefined

Here i need to retrieve the object values, but unable to get it. Kindly help me to retrieve the data through query params and fetch using typescript ngOnit without using html.

Base on your url localhost:80000/#/page-mockup?data=%5Bobject%20Object%5D, reason because angular picks only the data key and and converted the value into a string (I guess this is only for object values), which is why you get [object Object]

console.log({mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432"}.toString());

So convert this

this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });

to this

this.router.navigate(['/page-mockup'], { queryParams: data,  skipLocationChange: true });