Why does it not work to retrieve parameter data in my angular2 app?

Question

I want to send data as parameters in and retrieve that data in a different component in my angular2 app written in typescript. I succeed at this when sending data that is of type number but it fails in a different case when sending string data. In this case the data retrieved is NaN. The data is visible in the URL. I looked at the angular2 docs, as well as other stackoverflow questions, but could not find a solution. These are the relevant code snippits.

app.routes.ts

  { path: 'recommendations', component: Recommendations,
    children:[
      {path:'info/:mod-title/:mod-desc', component:ModalInfo},
      {path:'map/:lat/:lng', component:Map}

    ]},

recommend.component.ts

  loadInfo(){
    this.router.navigate(['/recommendations/info/:'+this.modTitle+'/:'+this.modDesc]); 

    loadMap(){
      this.router.navigate(['/recommendations/map/:'+this.lat+'/:'+this.lng]); 
    }

modal-info.component.ts

  ngOnInit():any {
    this.sub = this.modalRoute
      .params
      .subscribe(params => {
        this.itemTitle = +params['mod-title'];
        this.itemDesc = +params['mod-desc'];
      });
    alert(this.itemTitle+" "+this.itemDesc);
    this.loadData();
  } //This alerts NaN

google.component.ts

  ngOnInit():any {
    this.sub = this.route
      .params
      .subscribe(params => {
        this.lat = +params['lat'];
        this.lng = +params['lng'];
      });
  } //This assigns the data correctly.

Answer 1

Do you realize that + operator is trying to convert string to number ? so if a string is not a number it will likely return NaN