Data not passing through with route in Angular 6

Question

I have a application with a table of cars:

This is my code:

Carcomponent.html

<tbody>
        <tr *ngFor="let car of allCars; index as carId" \>
          <td [routerLink]="['/cars', carId]">{{car.carId}}</td>
          <td>{{car.brand}}</td>
          <td>{{car.model}}</td>
          <td>{{car.color}}</td>
          <td>{{car.topSpeed }}</td>
        </tr>
</tbody>

I have register the route like this:

{ path: 'cars/:carId', component: CardetailsComponent }

And this is my CarDetails.ts file:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CarVM } from '../viewmodels/car-vm';
import { CarService } from '../services/car.service';

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

export class CardetailsComponent implements OnInit {

  car: any;
  carList: any;

  constructor(private route: ActivatedRoute, private carservice: CarService) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.car = params.get('carId');
    });
  }
  getCarList() {
    this.carList = new CarVM();
    this.carservice.getCarById(this.carList.carId).subscribe((res: any) => {
      this.carList = res.data;
      console.log(this.carList)
    })
  }
}   

And on my Cardetails.html I want to show the selected car like this:

<h2>Car Details</h2>
<div *ngIf="car">
  <h3>{{ car.brand }}</h3>
  <h4>{{ car.model }}</h4>
  <p>{{ car.color }}</p>
</div>

The routing is working fine and fetching the cars is working. Now I want to select one car and see the brand, model, color on the next page. I use a viewmodel for this:

export class CarVM {
  CarId: number;
  Brand: string;
  Model: string;
  Color: string;
  TopSpeed: number;
}

How can I see the selected car on the next page?

I have followed this tutorial:

https://angular.io/start/routing

Answer 1

Ok, you seem to be bit confused. In cardetails component you want to process carId from route parameters and use it to get car details. You can either get them from server, or have the service return already loaded details of all cars.

Let's say we are trying to make it happen getting the first way, it might look like this:

import { map, switchMap } from 'rxjs/operators';

ngOnInit() {
  this.getCar();
}

private getCar(): void {
  this.route.paramMap.pipe(
    map(params => params.get('carId')),
    switchMap(carId => {
      return this.carservice.getCarById(carId);
    })
  ).subscribe(
    res => {
      this.car = res;
      console.log('@My car:', this.car);
    }
  );
}

First, you'll get the carId from route.paramMap, map it using rxjs map, then use switchMap to call you carservice.getCarById(carId) and have it return Observable to which you can subscribe. This should do the trick. Don't forget to properly map it/create CarVM object from it.

Answer 2

The problem is, you don't have CarVM object properly on CardetailsComponent. You are only getting carId into CarVM here: this.car = CarVM[+params.get('carId')];

First you need to create CarVM properly with your class variables. And the you can call your index.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CarVM } from '../viewmodels/car-vm';

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

export class CardetailsComponent implements OnInit {

  car: any;
  carList: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
          this.car = params.get('carId');
        });
      }
   getCarList(){
   this.carList = new CarVM();
   //call your service here to fill your carList variable and once you get car list, you will be able to access variable using with your index (this.car).
  }
 }