docs(toh-5/dart): make dashboard more robust (#1688)

Originally the dashboard TS expression ``heroes.slice(1, 5))` had been
written as:

> _heroService.getHeroes().getRange(1, 5)

which is brittle; it fails if there are not enough heroes. Slice
doesn't fail; an equivalent express
ion in Dart is

> _heroService.getHeroes().skip(1).take(4)

This is now used.

Other changes:
- Fix in css (missed TS-side update).
- Ran `dartfmt` on `heroes_component.dart`.

Author: chalin

public/docs/_examples/toh-5/dart/lib/dashboard_component.dart

@@ -32,7 +32,7 @@ class DashboardComponent implements OnInit {
   // #enddocregion ctor
 
   Future<Null> ngOnInit() async {
-    heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+    heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
   // #docregion goto-detail

public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart

@@ -19,7 +19,7 @@ class DashboardComponent implements OnInit {
   DashboardComponent(this._heroService);
 
   Future<Null> ngOnInit() async {
-    heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+    heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
   gotoDetail() {/* not implemented yet */}

public/docs/_examples/toh-5/dart/lib/hero.dart

@@ -3,4 +3,4 @@ class Hero {
   String name;
 
   Hero(this.id, this.name);
-}
+}

public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart

@@ -1,6 +1,5 @@
 // #docplaster
-// #docregion
-// #docregion v2
+// #docregion , v2
 import 'dart:async';
 import 'dart:html';
 

public/docs/_examples/toh-5/dart/lib/heroes_component.css

@@ -6,7 +6,7 @@
   margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
-  width: 10em;
+  width: 15em;
 }
 .heroes li {
   cursor: pointer;

public/docs/_examples/toh-5/dart/lib/heroes_component.dart

@@ -14,10 +14,9 @@ import 'hero_service.dart';
     selector: 'my-heroes',
     // #enddocregion heroes-component-renaming
     templateUrl: 'heroes_component.html',
-    styleUrls:  const ['heroes_component.css'],
-    directives: const [HeroDetailComponent]
-    // #docregion heroes-component-renaming
-)
+    styleUrls: const ['heroes_component.css'],
+    directives: const [HeroDetailComponent])
+// #docregion heroes-component-renaming
 // #enddocregion heroes-component-renaming, metadata
 // #docregion class, heroes-component-renaming
 class HeroesComponent implements OnInit {
@@ -37,9 +36,13 @@ class HeroesComponent implements OnInit {
     getHeroes();
   }
 
-  void onSelect(Hero hero) { selectedHero = hero; }
+  void onSelect(Hero hero) {
+    selectedHero = hero;
+  }
 
-  Future<Null> gotoDetail() =>
-      _router.navigate(['HeroDetail', {'id': selectedHero.id.toString()}]);
+  Future<Null> gotoDetail() => _router.navigate([
+        'HeroDetail',
+        {'id': selectedHero.id.toString()}
+      ]);
   // #docregion heroes-component-renaming
 }