diff --git a/src/app/shared/plunker/plunker-writer.ts b/src/app/shared/plunker/plunker-writer.ts
index 9ea1575a4..f1a30a498 100644
--- a/src/app/shared/plunker/plunker-writer.ts
+++ b/src/app/shared/plunker/plunker-writer.ts
@@ -113,9 +113,25 @@ export class PlunkerWriter {
       fileContent = fileContent.replace(/material-docs-example/g, data.selectorName);
     } else if (fileName == 'main.ts') {
       // Replace the component name in `main.ts`.
-      // For example, `import {MaterialDocsExample} from 'material-docs-example'`
+
+      // Replace `import {MaterialDocsExample} from 'material-docs-example'`
       // will be replaced as `import {ButtonDemo} from './button-demo'`
-      fileContent = fileContent.replace(/MaterialDocsExample/g, data.componentName);
+      fileContent = fileContent.replace(/{MaterialDocsExample}/g, `{${data.componentName}}`);
+
+      // Replace `declarations: [MaterialDocsExample]`
+      // will be replaced as `declarations: [ButtonDemo]`
+      fileContent = fileContent.
+        replace(/declarations: \[MaterialDocsExample\]/g,
+          `declarations: [${data.componentName}]`);
+
+      // Replace `bootstrap: [MaterialDocsExample]`
+      // will be replaced as `bootstrap: [ButtonDemo]`
+      // This assumes the first component listed in the main component
+      const bootstrapComponent = data.componentName.split(',')[0];
+      fileContent = fileContent.
+        replace(/bootstrap: \[MaterialDocsExample\]/g,
+          `bootstrap: [${bootstrapComponent}]`);
+
       fileContent = fileContent.replace(/material-docs-example/g, data.indexFilename);
     }
     return fileContent;