Get object data to variable in Angular

Currently I'm doing a project in Angular with several JSON files. I have an anchor in my main component with routerLinks. I pass an angular bind to router path as variable by routerLink in module.ts and take that variable to another component called Filter. After getting variable in Filter component, I'm creating an url to get JSON data. I append the variable to url to complete the url, so that I can call different JSON files.

The problem is, the incoming variable called sub.name in Filter component, shows in the console correctly as {"sub.name":"ABC"} but when I put it into a variable, It shows as [object Object]. I used JSON.stringify() to convert it to a variable but still the problem arise.

This is what I have:

category.component.html

<ng-template #s><dd><a routerLink="{{sub.name}}" routerLinkActive="active">{{sub.name}}</a></dd></ng-template>

app.module.ts

const appRoutes: Routes = [
  { path: 'explore-all-item', component: AllItemsComponent },
  { path: ':sub.name', component: FilterComponent }
    ];

filter.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {

    cat:string;
    temp:string;

    @Input() url:string;

  constructor(private httpClient:HttpClient, private route: ActivatedRoute) {

    this.route.params.subscribe((params:any) => {this.temp = params})

    this.httpClient.get('http://myapp/explore/'+this.temp)

    .subscribe(
            (dat:any) => {

                this.cat = JSON.stringify(dat[0]);
            }
        )
  }
}

filter.component.html

<div>
    <p>{{temp}} is url</p>
</div>

And the output is [object Object] is url. How I overcome this?