Show Vehicle Details

[web-dave]

• Generate a vehicle-details component
• Click on a vehicle-preview should bring you to this vehicle-details component (RoutParams)
• Get the Vehicle from the Service and show all Details
• You need a new Route.

[web-dave]

generate

  ng g c fleet/vehicle-details

[web-dave]

vehicle-list.component.ts

 constructor(
    private service: VehicleService, 
    private router: Router,
    private route: ActivatedRoute) { }

  selectVehicle(vehicle: IVehicle) {
    this.router.navigate([vehicle.id], {relativeTo: this.route});
  }

[web-dave]

fleet-routing.module.ts

  children: [{
      path: '',
      component: VehicleListComponent
    }, {
      path: ':id',
      component: VehicleDetailsComponent
    }]

[web-dave]

vehicle-details.component.html (example)

<div class="panel panel-default" *ngIf="vehicle" >
   <div class="panel-heading">{{vehicle.make}} ({{vehicle.model}})</div>
  <div class="panel-body">
    <p>{{vehicle.description}}  <span class="badge">Sitze: {{vehicle.seats}}</span> </p>
    <p>{{vehicle.type}}</p>
  </div>
  <div class="panel-footer">{{vehicle.department}}</div>
</div>

[web-dave]

vehicle-details.component.ts

  constructor(
      private service: FleetService,
      private router: Router,
      private route: ActivatedRoute) { }

  ngOnInit() {
    this.route
      .params
      .subscribe((params: {id: string}) => {
        this.service.getVehicle(params.id)
          .subscribe(v => {
            console.log('!!', v);
            this.vehicle= v;
          });
      });
  }

[web-dave]

NEXT