adding multiple component routing

Vehicles/app/app.component.html

@@ -0,0 +1,5 @@
+<main>
+ <section>
+ <router-outlet></router-outlet>
+ </section>
+</main>

Vehicles/app/app.component.ts

@@ -2,10 +2,11 @@ import { Component } from 'angular2/core';
 import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
 import { VehiclesService } from './vehicles/vehicles.service';
 import { VehiclesListComponent } from "./vehicles/vehicles-list.component";
+import { VehicleDetailComponent } from "./vehicles/vehicle-detail.component";
 
 @Component({
  selector: 'vehicles-app',
- templateUrl: 'app/app.html',
+ templateUrl: 'app/app.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS, VehiclesService]
 })
@@ -15,6 +16,11 @@ import { VehiclesListComponent } from "./vehicles/vehicles-list.component";
  name: 'VehiclesList',
  component: VehiclesListComponent,
  useAsDefault: true
+ },
+ {
+ path: '/vehicles/detail/:id',
+ name: 'VehicleDetail',
+ component: VehicleDetailComponent
  }
 ])
 export class AppComponent { }

Vehicles/app/vehicles/vehicle-detail.component.html

@@ -0,0 +1,17 @@
+<div class="mdl-grid" *ngIf="vehicle">
+ <div class="mdl-cell mdl-cell--4-col">
+ <img [src]='vehicle.picture' border="0" alt="" style="width:100%">
+ </div>
+ <div class="mdl-cell mdl-cell--8-col">
+
+ <p>{{vehicle.make}} {{vehicle.model}}</p>
+
+ <p>Type: {{vehicle.type}}</p>
+
+ <p>License Plate: {{vehicle.licensePlate}}</p>
+
+ <p>Seats: {{vehicle.seats}}</p>
+
+ <p>Rating: {{vehicle.rating}}</p>
+ </div>
+</div>

Vehicles/app/vehicles/vehicle-detail.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from 'angular2/core';
+import { Router, RouteParams } from 'angular2/router';
+import { Vehicle } from './vehicle';
+import { VehiclesService } from './vehicles.service';
+
+@Component({
+ selector: 'vehicle-detail',
+ templateUrl: 'app/vehicles/vehicle-detail.component.html'
+})
+export class VehicleDetailComponent {
+
+ public vehicle: Vehicle;
+
+ constructor(private _router: Router, 
+ private _routeParams: RouteParams, 
+ private _vehiclesService: VehiclesService) { }
+
+ ngOnInit() {
+ this._getVehicle();
+ }
+
+ private _getVehicle() {
+ let id = +this._routeParams.get('id');
+ this._vehiclesService.getVehicle(id).then(vehicle => this.vehicle = vehicle);
+ }
+}

Vehicles/app/vehicles/vehicles-list.css → Vehicles/app/vehicles/vehicles-list.component.css

@@ -1,3 +1,9 @@
+
+.list-max-width img {
+ width: 100%;
+ height: auto;
+}
+
 .mdl-cell--col-3 {
  width: 25%;
 }

Vehicles/app/vehicles/vehicles-list.component.html

@@ -0,0 +1,7 @@
+<div class="mdl-grid list-max-width">
+ <div class="mdl-cell mdl-cell--3-col mdl-card mdl-shadow--4dp" *ngFor="#vehicle of vehicles" (click)="onSelect(vehicle)">
+ <div class="mdl-card__media">
+ <img class="article-image" [src]="vehicle.picture" border="0" alt="" />
+ </div>
+ </div>
+</div>

Vehicles/app/vehicles/vehicles-list.component.ts

@@ -1,21 +1,19 @@
 import { Component, OnInit } from 'angular2/core';
+import { Router } from 'angular2/router';
 import { Vehicle } from './vehicle';
 import { VehiclesService } from './vehicles.service';
-import { VehicleDetailComponent } from "./vehicle-details.component";
 
 @Component({
  selector: 'vehicles-list',
- templateUrl: 'app/vehicles/vehicles-list.html',
- styleUrls: ['app/vehicles/vehicles-list.css'],
- directives: [VehicleDetailComponent]
+ templateUrl: 'app/vehicles/vehicles-list.component.html',
+ styleUrls: ['app/vehicles/vehicles-list.component.css']
 })
-export class VehiclesListComponent {
+export class VehiclesListComponent implements OnInit {
 
  public title = 'Vehicles List';
  public vehicles: Vehicle[];
- public selectedVehicle: Vehicle;
 
- constructor(private _vehiclesService: VehiclesService) { }
+ constructor(private _router: Router, private _vehiclesService: VehiclesService) { }
 
  ngOnInit() {
  this.getVehicles();
@@ -25,7 +23,7 @@ export class VehiclesListComponent {
  this._vehiclesService.getVehicles().then(vehicles => this.vehicles = vehicles);
  }
 
- onSelect(vehicle) {
- this.selectedVehicle = vehicle;
+ onSelect(selectedVehicle: Vehicle) {
+ this._router.navigate(['VehicleDetail', { id: selectedVehicle.id }]);
  }
 }

Vehicles/app/vehicles/vehicles.service.ts

@@ -1,9 +1,15 @@
-import {Injectable} from 'angular2/core';
-import {VehiclesList} from './mock-vehicles';
+import { Injectable } from 'angular2/core';
+import { VehiclesList } from './mock-vehicles';
 
 @Injectable()
 export class VehiclesService {
+
  getVehicles() {
  return Promise.resolve(VehiclesList);
  }
+
+ getVehicle(id: number) {
+ let vehicle = VehiclesList.filter(x => x.id == id);
+ return Promise.resolve(vehicle[0]);
+ }
 }