Add additional -dialog.html to plunker for dialog examples (angular#66)

Author: tinayuangao

src/app/examples/example-data.ts

@@ -1,3 +1,6 @@
+import {EXAMPLE_COMPONENTS} from './example-module';
+
+
 /**
  * Example data
  *   with information about Component name, selector, files used in example, and path to examples
@@ -15,17 +18,31 @@ export class ExampleData {
   componentName = 'ButtonDemo';
 
   constructor(example: string) {
-    if (example) {
+    if (example && EXAMPLE_COMPONENTS[example]) {
       this.examplePath = `/app/examples/${example}/`;
       // TODO(tinayuangao): Do not hard-code extensions
       this.exampleFiles = ['html', 'ts', 'css']
         .map((extension) => `${example}-example.${extension}`);
+      if (EXAMPLE_COMPONENTS[example].additionalFiles) {
+        this.exampleFiles = this.exampleFiles.concat(EXAMPLE_COMPONENTS[example].additionalFiles);
+      }
       this.selectorName = this.indexFilename = `${example}-example`;
+
       var exampleName = example.replace(/(?:^\w|\b\w)/g, function(letter) {
         return letter.toUpperCase();
       });
-      this.description = exampleName.replace(/[\-]+/g, ' ') + ' Example';
-      this.componentName = exampleName.replace(/[\-]+/g, '') + 'Example';
+
+      if (EXAMPLE_COMPONENTS[example].title) {
+        this.description = EXAMPLE_COMPONENTS[example].title;
+      } else {
+        this.description = exampleName.replace(/[\-]+/g, ' ') + ' Example';
+      }
+
+      if (EXAMPLE_COMPONENTS[example].selectorName) {
+        this.componentName = EXAMPLE_COMPONENTS[example].selectorName;
+      } else {
+        this.componentName = exampleName.replace(/[\-]+/g, '') + 'Example';
+      }
     }
   }
 }

src/app/examples/example-module.ts

@@ -70,6 +70,8 @@ import {SelectFormExample} from './select-form/select-form-example';
 export interface LiveExample {
   title: string;
   component: any;
+  additionalFiles: string[];
+  selectorName: string;
 }
 
 /**
@@ -91,8 +93,18 @@ export const EXAMPLE_COMPONENTS = {
   'card-overview': {title: 'Basic cards', component: CardOverviewExample},
   'checkbox-configurable': {title: 'Configurable checkbox', component: CheckboxConfigurableExample},
   'checkbox-overview': {title: 'Basic checkboxes', component: CheckboxOverviewExample},
-  'dialog-overview': {title: 'Basic dialog', component: DialogOverviewExample},
-  'dialog-result': {title: 'Dailog with a result', component: DialogResultExample},
+  'dialog-overview': {
+    title: 'Basic dialog',
+    component: DialogOverviewExample,
+    additionalFiles: ['dialog-overview-example-dialog.html'],
+    selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog',
+  },
+  'dialog-result': {
+    title: 'Dailog with a result',
+    component: DialogResultExample,
+    additionalFiles: ['dialog-result-example-dialog.html'],
+    selectorName: 'DialogResultExample, DialogResultExampleDialog',
+  },
   '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},