CodeSequence
diff --git a/Diff for: ‎apps/embed/src/app/app.module.ts
+5-5 b/Diff for: ‎apps/embed/src/app/app.module.ts
+5-5
diff --git a/Diff for: ‎apps/embed/src/app/dash/dash.component.css b/Diff for: ‎apps/embed/src/app/dash/dash.component.css
diff --git a/Diff for: ‎apps/embed/src/app/dash/dash.component.html
-1 b/Diff for: ‎apps/embed/src/app/dash/dash.component.html
-1
diff --git a/Diff for: ‎apps/embed/src/app/dash/dash.component.spec.ts
-25 b/Diff for: ‎apps/embed/src/app/dash/dash.component.spec.ts
-25
diff --git a/Diff for: ‎apps/embed/src/app/dash/dash.component.ts
-16 b/Diff for: ‎apps/embed/src/app/dash/dash.component.ts
-16
diff --git a/Diff for: ‎elements-build.js
+3-2 b/Diff for: ‎elements-build.js
+3-2
diff --git a/Diff for: ‎site/custom.css
+18 b/Diff for: ‎site/custom.css
+18
diff --git a/Diff for: ‎site/custom.js
+13 b/Diff for: ‎site/custom.js
+13
diff --git a/Diff for: ‎site/embed.js
+1-1 b/Diff for: ‎site/embed.js
+1-1
diff --git a/Diff for: ‎site/index.html
+19-2 b/Diff for: ‎site/index.html
+19-2
@@ -3,21 +3,21 @@ import { Injector, NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { NxModule } from '@nrwl/nx';
-import { DashComponent } from './dash/dash.component';
 import { createCustomElement } from '@angular/elements';
+import { TotalsComponent } from '@workspace/totals-view';
 
 @NgModule({
-  declarations: [AppComponent, DashComponent],
+  declarations: [AppComponent],
   imports: [BrowserModule, NxModule.forRoot()],
   providers: [],
-  entryComponents: [DashComponent]
+  entryComponents: [TotalsComponent]
 })
 export class AppModule {
   constructor(private injector: Injector) {}
 
   ngDoBootstrap() {
-    const el = createCustomElement(DashComponent, {injector: this.injector});
-    customElements.define('embedded-dashboard', el);
+    const el = createCustomElement(TotalsComponent, {injector: this.injector});
+    customElements.define('totals-view', el);
   }
 
 }
@@ -5,13 +5,14 @@ const concat = require('concat');
     const files = [
         './dist/apps/embed/runtime.js',
         './dist/apps/embed/polyfills.js',
-        './dist/apps/embed/scripts.js',
+        // './dist/apps/embed/scripts.js', Not currently being generated by ng build.
         './dist/apps/embed/main.js'
     ];
 
     await fs.ensureDir('site')
     await concat(files, 'site/embed.js')
     await fs.copyFile('./dist/apps/embed/styles.css', 'site/styles.css')
-    await fs.copy('./dist/apps/embed/assets/', 'site/assets/')
 
+    // If we need pictures or other assets, uncomment below.
+    // await fs.copy('./dist/apps/embed/assets/', 'site/assets/')
 })()
@@ -0,0 +1,18 @@
+.wrapper {
+  display: flex;
+}
+
+.box {
+  border: 2px solid;
+  border-radius: 3px;
+  padding: 10px;
+}
+
+.native {
+  border-color: limegreen;
+}
+
+.angular {
+  border-color: blue;
+  margin-left: 15px;
+}
@@ -0,0 +1,13 @@
+var collection = document.querySelector('#collection'),
+  submit = document.querySelector('#submit');
+
+collection.value = JSON.stringify([
+  {"name": "Item 1", "price": 10},
+  {"name": "Item 2", "price": 5.3},
+  {"name": "Item 3", "price": 103},
+  {"name": "Item 4", "price": 10343}
+]);
+
+submit.addEventListener('click', () => {
+  document.querySelector('totals-view').collection = JSON.parse(collection.value)
+});
@@ -5,12 +5,29 @@
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="custom.css">
   <title>Embed</title>
 </head>
 <body>
-  <embedded-dashboard></embedded-dashboard>
+  <div class="wrapper">
+    <div class="box native">
+      <textarea placeholder="Paste a JSON collection whose objects contain a 'price' property" name="collection" id="collection" cols="30" rows="10"></textarea>
+      <br>
+      <button id="submit">Submit</button>
+    </div>
+    <div class="box angular">
+      <totals-view></totals-view>
+    </div>
+  </div>
+
+
+  <!-- Polyfill -->
   <script src="https://unpkg.com/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+
+  <!-- Generated by Angular -->
   <script src="embed.js"></script>
+
+  <!-- Custom DOM script -->
+  <script src="custom.js"></script>
 </body>
 </html>