chore: update examples to match material2 repo (#152)

Author: kara

src/app/examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -1,6 +1,8 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
+
 import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'autocomplete-overview-example',

src/app/examples/dialog-elements/dialog-elements-example-dialog.html

@@ -0,0 +1,5 @@
+<h1 md-dialog-title>Dialog with elements</h1>
+<div md-dialog-content>This dialog showcases the title, close, content and actions elements.</div>
+<div md-dialog-actions>
+  <button md-button md-dialog-close>Close</button>
+</div>

src/app/examples/dialog-elements/dialog-elements-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/app/examples/dialog-elements/dialog-elements-example.html

@@ -0,0 +1 @@
+<button md-button (click)="openDialog()">Launch dialog</button>

src/app/examples/dialog-elements/dialog-elements-example.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+
+@Component({
+  selector: 'dialog-elements-example',
+  templateUrl: './dialog-elements-example.html',
+})
+export class DialogElementsExample {
+  constructor(public dialog: MdDialog) { }
+
+  openDialog() {
+    this.dialog.open(DialogElementsExampleDialog);
+  }
+}
+
+
+@Component({
+  selector: 'dialog-elements-example-dialog',
+  templateUrl: './dialog-elements-example-dialog.html',
+})
+export class DialogElementsExampleDialog { }

src/app/examples/example-data.ts

@@ -28,9 +28,7 @@ export class ExampleData {
       }
       this.selectorName = this.indexFilename = `${example}-example`;
 
-      var exampleName = example.replace(/(?:^\w|\b\w)/g, function(letter) {
-        return letter.toUpperCase();
-      });
+      let exampleName = example.replace(/(?:^\w|\b\w)/g, letter => letter.toUpperCase());
 
       if (EXAMPLE_COMPONENTS[example].title) {
         this.description = EXAMPLE_COMPONENTS[example].title;

src/app/examples/example-module.ts

@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 import {MaterialModule} from '@angular/material';
+import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
 import {ButtonOverviewExample} from './button-overview/button-overview-example';
 import {ButtonTypesExample} from './button-types/button-types-example';
 import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
@@ -39,6 +40,10 @@ import {
   DialogResultExampleDialog,
   DialogResultExample
 } from './dialog-result/dialog-result-example';
+import {
+  DialogElementsExampleDialog,
+  DialogElementsExample
+} from './dialog-elements/dialog-elements-example';
 import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example';
 import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
 import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
@@ -62,7 +67,6 @@ import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-labe
 import {RadioOverviewExample} from './radio-overview/radio-overview-example';
 import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example';
 import {SelectOverviewExample} from './select-overview/select-overview-example';
-import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
 import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {SelectFormExample} from './select-form/select-form-example';
@@ -102,11 +106,17 @@ export const EXAMPLE_COMPONENTS = {
     selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog',
   },
   'dialog-result': {
-    title: 'Dailog with a result',
+    title: 'Dialog with a result',
     component: DialogResultExample,
     additionalFiles: ['dialog-result-example-dialog.html'],
     selectorName: 'DialogResultExample, DialogResultExampleDialog',
   },
+  'dialog-elements': {
+    title: 'Dialog elements',
+    component: DialogElementsExample,
+    additionalFiles: ['dialog-elements-example-dialog.html'],
+    selectorName: 'DialogElementsExample, DialogElementsExampleDialog',
+  },
   'grid-list-dynamic': {title: 'Dynamic grid-list', component: GridListDynamicExample},
   'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample},
   'icon-overview': {title: 'Basic icons', component: IconOverviewExample},
@@ -145,10 +155,7 @@ export const EXAMPLE_COMPONENTS = {
   'slide-toggle-overview': {title: 'Basic slide-toggles', component: SlideToggleOverviewExample},
   'snack-bar-component': {
     title: 'Snack-bar with a custom component',
-    component: SnackBarComponentExample,
-    selectorName: 'SnackBarComponentExample, PizzaPartyComponent',
-    additionalFiles:
-      ['snack-bar-component-example-snack.html', 'snack-bar-component-example-snack.css']
+    component: SnackBarComponentExample
   },
   'snack-bar-overview': {title: 'Basic snack-bar', component: SnackBarOverviewExample},
   'tabs-overview': {title: 'Basic tabs', component: TabsOverviewExample},
@@ -179,6 +186,8 @@ export const EXAMPLE_LIST = [
   DialogOverviewExampleDialog,
   DialogResultExample,
   DialogResultExampleDialog,
+  DialogElementsExample,
+  DialogElementsExampleDialog,
   GridListDynamicExample,
   GridListOverviewExample,
   IconOverviewExample,

src/app/examples/grid-list-overview/grid-list-overview-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+md-grid-tile {
+  background: lightblue;
+}

src/app/examples/grid-list-overview/grid-list-overview-example.html

@@ -1,4 +1,4 @@
-<md-grid-list cols="2">
+<md-grid-list cols="2" rowHeight="2:1">
   <md-grid-tile>1</md-grid-tile>
   <md-grid-tile>2</md-grid-tile>
   <md-grid-tile>3</md-grid-tile>

src/app/examples/grid-list-overview/grid-list-overview-example.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 
-
 @Component({
   selector: 'grid-list-overview-example',
+  styleUrls: ['./grid-list-overview-example.css'],
   templateUrl: './grid-list-overview-example.html',
 })
 export class GridListOverviewExample {}