Angular 2 when passing id to url it shows? complntId = TS0000031

has a script, if user enters one number and submits it, it should go to that id and display the details.

when i navigate the url it shows something like this

complaintstatus / TS0000031? ComplntId = TS0000031

Detailed view of the code:

export class ComplaintDetailComponent implements OnInit {
    id:number;
    private sub:any;
    complntId : any;
    constructor(private ComponentService:ComplaintService,private route:ActivatedRoute){

    }
    ngOnInit() {

   this.sub= this.route.params.subscribe((params:Params)=>{
        this.ComponentService.getCompliants(params['complntId'])
    });
    console.log(this.sub);

  }

      

        
        
        
      

    

user enters id code:

export class ComplaintStatusComponent {

    constructor(private router:Router){}
getComplaintDetails(complntId){
  this.router.navigate(['/complaintstatus', complntId]);
}  

}

      

        
        
        
      

    

and one more question: how can I send the user to enter id to another component.

and the service code:

export class ComplaintService{
    private _url:string ="http://192.168.0.106:8000/app/complaint/complaintstatus"
    constructor(private _http:Http){}
    getCompliants(complntId){
        return this._http.get(this._url + '/' + complntId).map((response:Response)=>response.json());

    }
}

      

        
        
        
      

    

routing module:

const routes: Routes = [
    {path:'complaintregistration',component:ComplaintRegistartionComponent},
    {path:'complaintstatus',component:ComplaintStatusComponent},
    {path:'complaintstatus/:complntId',component:ComplaintDetailComponent}
];