diff --git a/core/api/src/main/java/org/onosproject/ui/UiExtension.java b/core/api/src/main/java/org/onosproject/ui/UiExtension.java
index 81965dc..bc32ac6 100644
--- a/core/api/src/main/java/org/onosproject/ui/UiExtension.java
+++ b/core/api/src/main/java/org/onosproject/ui/UiExtension.java
@@ -53,6 +53,7 @@
     private final UiTopoMapFactory topoMapFactory;
 
     private boolean isValid = true;
+    private boolean ui2Valid = true;
 
     // private constructor - only the builder calls this
     private UiExtension(ClassLoader cl, String path, List<UiView> views,
@@ -60,7 +61,8 @@
                         UiMessageHandlerFactory mhFactory,
                         UiTopoOverlayFactory toFactory,
                         UiTopo2OverlayFactory to2Factory,
-                        UiTopoMapFactory tmFactory) {
+                        UiTopoMapFactory tmFactory,
+                        boolean ui2Vld) {
         classLoader = cl;
         resourcePath = path;
         viewList = views;
@@ -69,6 +71,7 @@
         topoOverlayFactory = toFactory;
         topo2OverlayFactory = to2Factory;
         topoMapFactory = tmFactory;
+        ui2Valid = ui2Vld;
     }
 
 
@@ -96,7 +99,7 @@
      * @return contributed view descriptors
      */
     public List<UiView> views() {
-        return isValid ? viewList : ImmutableList.of();
+        return (isValid || ui2Valid) ? viewList : ImmutableList.of();
     }
 
     /**
@@ -181,6 +184,7 @@
         private UiTopoOverlayFactory topoOverlayFactory = null;
         private UiTopo2OverlayFactory topo2OverlayFactory = null;
         private UiTopoMapFactory topoMapFactory = null;
+        private boolean ui2valid = false;
 
         /**
          * Create a builder with the given class loader.
@@ -268,6 +272,17 @@
         }
 
         /**
+         * Marks this as ui2valid for Ui2.
+         * This is because Ui2 does not include the same layout of embedded html, js and css
+         *
+         * @return self, for chaining
+         */
+        public Builder ui2() {
+            ui2valid = true;
+            return this;
+        }
+
+        /**
          * Builds the user interface extension.
          *
          * @return UI extension instance
@@ -276,7 +291,7 @@
             return new UiExtension(classLoader, resourcePath, viewList,
                                    lionBundles,
                                    messageHandlerFactory, topoOverlayFactory,
-                                   topo2OverlayFactory, topoMapFactory);
+                                   topo2OverlayFactory, topoMapFactory, ui2valid);
         }
     }
 }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md
index ac5d669..a5f3a76 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md
@@ -9,10 +9,6 @@
 in to a running ONOS system
 * A JavaScript library that may be embedded within an Angular Web project
 
-${symbol_h2} web/gitignore
-The file **web/gitignore** should be renamed to **web/.gitignore** before the app is added
-to any git repository
-
 ${symbol_h2} Standalone Application outside of ONOS
 In the standalone scenario this library can continue to be built with Maven like:
 * mvn clean install
@@ -45,12 +41,12 @@
 ```angular2
   {
     path: '${artifactId}-gui',
-    loadChildren: '${artifactId}-gui-lib#${appNameCap}${appNameEnd}GuiLibModule'
+    loadChildren: '${artifactId}-gui-lib#${appNameTitle}GuiLibModule'
   }
 ```
 and
 ```angular2
- import { ${appNameCap}${appNameEnd}GuiLibModule } from '${artifactId}-gui-lib';
+ import { ${appNameTitle}GuiLibModule } from '${artifactId}-gui-lib';
 ```
 in the imports section at the top of the same file.
 
@@ -96,10 +92,12 @@
 
 Run
 ```bash
-cd ${artifactId} && mvn install && mvn clean
+cd ~/onos/apps/${artifactId} && \
+    mvn -pl web/${artifactId}-gui install && \
+    mvn -pl web/${artifactId}-gui clean
 ```
-once inside the folder - this will fetch the dependent node modules for the
-Angular application.
+once inside the folder - this is the easiest way to fetch the dependent node
+modules for the Angular application.
 
 To ensure it gets built along with ONOS rename the files **BUILD.rename**,
 **app/BUILD.rename** and **web/${artifactId}/BUILD.rename** to **BUILD**, and
@@ -117,7 +115,6 @@
 rm -rf web/${artifactId}-gui/node_modules/rxjs/src
 ```
 
-
 In the file
 * ~/onos/apps/${artifactId}/web/${artifactId}-gui/projects/${artifactId}-gui-lib/package.json
 change the version to be the current version of ONOS e.g. 2.2.0
@@ -150,12 +147,12 @@
 ```angular2
   {
     path: '${artifactId}-gui',
-    loadChildren: '${artifactId}-gui-lib#${appNameCap}${appNameEnd}GuiLibModule'
-  }
+    loadChildren: '${artifactId}-gui-lib#${appNameTitle}GuiLibModule'
+  },
 ```
 and in the imports section at the top of the same file
 ```angular2
- import { ${appNameCap}${appNameEnd}GuiLibModule } from '${artifactId}-gui-lib';
+ import { ${appNameTitle}GuiLibModule } from '${artifactId}-gui-lib';
 ```
 
 ### Run the build
@@ -165,3 +162,56 @@
 ob
 ```
 or equivalent.
+
+### Run the application
+Start ONOS in the normal way.
+
+Using the ONOS command line, activate the application:
+```bash
+app activate ${artifactId}
+```
+
+To turn on ONOS Server side logging, from the same ONOS CLI use:
+```bash
+log:set DEBUG ${package}
+log:set DEBUG org.onosproject.ui.impl
+```
+
+On the ONOS GUI the navigation menu should show the new application link. Clicking
+on it will navigate to the new app (there is a system of lazy-loading implemented
+here so that applications are not loaded until they are first used).
+
+### Rebuild
+To rebuild and run the **web** side of the application do:
+```bash
+bazel build //web/gui2:onos-web-gui2-oar && \
+    onos-app localhost reinstall! bazel-bin/web/gui2/onos-web-gui2-oar.oar
+```
+
+To rebuild and run the **server** side of the application do:
+```bash
+bazel build //apps/${artifactId}:onos-apps-${artifactId}-oar && \
+    onos-app localhost reinstall! bazel-bin/apps/${artifactId}/onos-apps-${artifactId}-oar.oar
+```
+
+
+### App structure
+The application demonstrates some major concepts:
+* The use of Angular 7 concepts like Modules, Components, Service
+
+* The top level component - contains the "Fetch Data" button and the connection
+to the server backend through a WebSocket
+ * Passing a number in the request
+ * Receiving a JSON object in reply
+
+* Reuse of items from the **gui2-fw-lib** - with LogService, WebSocketService and
+IconComponent
+
+* The use of a child component (WelcomeComponent) in 3 different ways
+  * The passing of Inputs to this component
+  * The passing of an Event out when the component is clicked
+
+* The embedding of SVG content in to the web page
+
+* The use of TypeScript (as opposed to JavaScript or ECMAScript directly) to ensure
+type safety
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml
index 75a1c31..4a7c9fd 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml
@@ -34,7 +34,7 @@
 
     <properties>
         <onos.app.name>${package}.${artifactId}</onos.app.name>
-        <onos.app.title>${appNameCap}${appNameEnd} App</onos.app.title>
+        <onos.app.title>${appNameTitle} App</onos.app.title>
         <onos.app.origin>Foo, Inc.</onos.app.origin>
         <onos.app.category>UI</onos.app.category>
         <onos.app.url>http://onosproject.org</onos.app.url>
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiComponent.java b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiComponent.java
similarity index 89%
rename from tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiComponent.java
rename to tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiComponent.java
index 4522692..a1d8b33 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiComponent.java
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiComponent.java
@@ -37,10 +37,10 @@
  * Skeletal ONOS UI Custom-View application component.
  */
 @Component(immediate = true)
-public class AppUiComponent {
+public class ${appNameTitle}UiComponent {
 
-    private static final String VIEW_ID = "sampleCustom";
-    private static final String VIEW_TEXT = "Sample Custom";
+    private static final String VIEW_ID = "${artifactId}-gui";
+    private static final String VIEW_TEXT = "${appNameTitle} UI";
 
     private final Logger log = LoggerFactory.getLogger(getClass());
 
@@ -55,14 +55,15 @@
     // Factory for UI message handlers
     private final UiMessageHandlerFactory messageHandlerFactory =
             () -> ImmutableList.of(
-                    new AppUiMessageHandler()
+                    new ${appNameTitle}UiMessageHandler()
             );
 
-    // Application UI extension
+    // ${appNameTitle} UI extension
     protected UiExtension extension =
             new UiExtension.Builder(getClass().getClassLoader(), uiViews)
                     .resourcePath(VIEW_ID)
                     .messageHandlerFactory(messageHandlerFactory)
+                    .ui2()
                     .build();
 
     @Activate
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiMessageHandler.java b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiMessageHandler.java
similarity index 79%
rename from tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiMessageHandler.java
rename to tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiMessageHandler.java
index 0a35370..18c0968 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiMessageHandler.java
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiMessageHandler.java
@@ -30,10 +30,10 @@
 /**
  * Skeletal ONOS UI Custom-View message handler.
  */
-public class AppUiMessageHandler extends UiMessageHandler {
+public class ${appNameTitle}UiMessageHandler extends UiMessageHandler {
 
-    private static final String SAMPLE_CUSTOM_DATA_REQ = "sampleCustomDataRequest";
-    private static final String SAMPLE_CUSTOM_DATA_RESP = "sampleCustomDataResponse";
+    private static final String ${appNameAllCaps}_DATA_REQ = "${appNameAllLower}DataRequest";
+    private static final String ${appNameAllCaps}_DATA_RESP = "${appNameAllLower}DataResponse";
 
     private static final String NUMBER = "number";
     private static final String SQUARE = "square";
@@ -49,15 +49,15 @@
     @Override
     protected Collection<RequestHandler> createRequestHandlers() {
         return ImmutableSet.of(
-                new SampleCustomDataRequestHandler()
+                new ${appNameTitle}DataRequestHandler()
         );
     }
 
     // handler for sample data requests
-    private final class SampleCustomDataRequestHandler extends RequestHandler {
+    private final class ${appNameTitle}DataRequestHandler extends RequestHandler {
 
-        private SampleCustomDataRequestHandler() {
-            super(SAMPLE_CUSTOM_DATA_REQ);
+        private ${appNameTitle}DataRequestHandler() {
+            super(${appNameAllCaps}_DATA_REQ);
         }
 
         @Override
@@ -71,7 +71,7 @@
             result.put(SQUARE, someNumber * someNumber);
             result.put(CUBE, someNumber * someNumber * someNumber);
             result.put(MESSAGE, String.format(MSG_FORMAT, someIncrement + 1));
-            sendMessage(SAMPLE_CUSTOM_DATA_RESP, result);
+            sendMessage(${appNameAllCaps}_DATA_RESP, result);
         }
     }
 }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml
index 53d7322..c1465c7 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml
@@ -6,9 +6,10 @@
 #set ($artifactId = "${artifactId}")
 #set ($appNameCap = $artifactId.substring(0,1).toUpperCase())
 #set ($appNameEnd = $artifactId.substring(1).replace("-","").toLowerCase())
+#set ($appNameTitle = $appNameCap + $appNameEnd)
 #set ($appNameAllCaps = $artifactId.replace("-","_").toUpperCase())
+#set ($appNameAllLower = $artifactId.replace("-","").toLowerCase())
 #set( $symbol_h2 = '##' )
-
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   ~ Copyright ${year} Open Networking Foundation
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
index 0d28862..50cada3 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
@@ -190,7 +190,7 @@
           "     See bazel-genfiles/apps/${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib-test.log for more details' >&2;" +
           "   exit 1;" +
           " fi;",
-    message = "Angular ${appNameCap}${appNameEnd} Lib lint and test",
+    message = "Angular ${appNameTitle} Lib lint and test",
 )
 
 """
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md
index a06c138..3c87895 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md
@@ -1,4 +1,4 @@
-# ${appNameCap}${appNameEnd}GuiLib
+# ${appNameTitle}GuiLib
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.4.
 
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts
index 6a20ad8..06a05c7 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts
@@ -15,17 +15,19 @@
  */
 
 import { NgModule } from '@angular/core';
+import {CommonModule} from '@angular/common';
 import { Gui2FwLibModule } from 'gui2-fw-lib';
-import { ${appNameCap}${appNameEnd}Component } from './${artifactId}/${artifactId}.component';
-import { ${appNameCap}${appNameEnd}RoutingModule } from './${artifactId}-routing.module';
+import { ${appNameTitle}Component } from './${artifactId}/${artifactId}.component';
+import { ${appNameTitle}RoutingModule } from './${artifactId}-routing.module';
 import { WelcomeComponent } from './welcome/welcome.component';
 
 @NgModule({
-    declarations: [${appNameCap}${appNameEnd}Component, WelcomeComponent],
+    declarations: [${appNameTitle}Component, WelcomeComponent],
     imports: [
-        ${appNameCap}${appNameEnd}RoutingModule,
-        Gui2FwLibModule
+        ${appNameTitle}RoutingModule,
+        Gui2FwLibModule,
+        CommonModule
     ],
-    exports: [${appNameCap}${appNameEnd}Component, WelcomeComponent]
+    exports: [${appNameTitle}Component, WelcomeComponent]
 })
-export class ${appNameCap}${appNameEnd}GuiLibModule { }
+export class ${appNameTitle}GuiLibModule { }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts
index 07a1621..255633c 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts
@@ -15,17 +15,17 @@
  */
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { ${appNameCap}${appNameEnd}Component } from './${artifactId}/${artifactId}.component';
+import { ${appNameTitle}Component } from './${artifactId}/${artifactId}.component';
 
 const appRoutes: Routes = [
     {
         path: '',
-        component: ${appNameCap}${appNameEnd}Component
+        component: ${appNameTitle}Component
     },
 ];
 
 /**
- * ONOS GUI -- ${appNameCap}${appNameEnd} View Feature Routing Module - allows it to be lazy loaded
+ * ONOS GUI -- ${appNameTitle} View Feature Routing Module - allows it to be lazy loaded
  *
  * See https://angular.io/guide/lazy-loading-ngmodules
  */
@@ -33,4 +33,4 @@
     imports: [RouterModule.forChild(appRoutes)],
     exports: [RouterModule]
 })
-export class ${appNameCap}${appNameEnd}RoutingModule { }
+export class ${appNameTitle}RoutingModule { }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css
index 9be9aeb..1ec2298 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css
@@ -13,3 +13,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+#ov-${appNameAllLower} {
+    padding: 20px;
+    color: navy;
+}
+
+#ov-${appNameAllLower} .button-panel {
+    margin: 10px;
+    width: 200px;
+    background-color: #ccf;
+}
+
+#ov-${appNameAllLower} .my-button {
+    cursor: pointer;
+    padding: 4px;
+    text-align: center;
+    color: white;
+    background-color: #99d;
+}
+
+#ov-${appNameAllLower} .number {
+    font-size: 140%;
+    text-align: right;
+}
+
+#ov-${appNameAllLower} .quote {
+    margin: 10px 20px;
+    font-style: italic;
+}
\ No newline at end of file
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html
index 4891ab3..626e2d7 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html
@@ -14,4 +14,41 @@
 ~ limitations under the License.
 -->
 
-<p>${artifactId} works!</p>
+<div id="ov-${appNameAllLower}">
+    <div class="button-panel">
+        <div class="my-button" (click)="getData()">Fetch Data</div>
+    </div>
+
+    <div class="data-panel">
+        <table>
+            <tr>
+                <td> Number </td>
+                <td class="number"> {{socketData.number}} </td>
+            </tr>
+            <tr>
+                <td> Square </td>
+                <td class="number"> {{socketData.square}} </td>
+            </tr>
+            <tr>
+                <td> Cube </td>
+                <td class="number"> {{socketData.cube}} </td>
+            </tr>
+        </table>
+        <onos-icon [iconId]="'bird'" [iconSize]="40" [toolTip]="'ONOS bird icon'" [classes]="'enabled'"></onos-icon>
+        <p>
+            A message from our sponsors:
+        </p>
+        <p>
+            <span class="quote"> {{socketData.message}} </span>
+        </p>
+        <p>Request Number: {{requestNumber}}</p>
+    </div>
+</div>
+<!-- Create an instance of a component passing it lteral value for colour and bind to the socketData.number-->
+<${artifactId}-app-welcome [message]="socketData.number" [colour]="'magenta'" (welcomeEventEmitter)="childClicked($event)"></${artifactId}-app-welcome>
+<${artifactId}-app-welcome [message]="socketData.square" [colour]="'aqua'" (welcomeEventEmitter)="childClicked($event)"></${artifactId}-app-welcome>
+<${artifactId}-app-welcome [message]="socketData.cube" [colour]="'orange'" (welcomeEventEmitter)="childClicked($event)"></${artifactId}-app-welcome>
+
+
+<p>Click one of the circles: </p>
+<p [ngStyle]="{'background-color': childSelected }">Child selected: {{childSelected}}</p>
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
index 5d0c76a..86954c8 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
@@ -15,8 +15,10 @@
  */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ${appNameCap}${appNameEnd}Component } from './${artifactId}.component';
+import { ${appNameTitle}Component } from './${artifactId}.component';
+import { WelcomeComponent } from '../welcome/welcome.component';
 import {ActivatedRoute, Params} from '@angular/router';
+import {CommonModule} from '@angular/common';
 import { of } from 'rxjs';
 import { } from 'jasmine';
 import {
@@ -41,13 +43,13 @@
     loadIconDef() { }
 }
 
-describe('${appNameCap}${appNameEnd}Component', () => {
+describe('${appNameTitle}Component', () => {
     let fs: FnService;
     let ar: MockActivatedRoute;
     let windowMock: Window;
     let logServiceSpy: jasmine.SpyObj<LogService>;
-    let component: ${appNameCap}${appNameEnd}Component;
-    let fixture: ComponentFixture<${appNameCap}${appNameEnd}Component>;
+    let component: ${appNameTitle}Component;
+    let fixture: ComponentFixture<${appNameTitle}Component>;
 
     beforeEach(async(() => {
         const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
@@ -67,8 +69,11 @@
         fs = new FnService(ar, logSpy, windowMock);
 
         TestBed.configureTestingModule({
-            imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
-            declarations: [ ${appNameCap}${appNameEnd}Component ],
+            imports: [BrowserAnimationsModule, CommonModule, FormsModule, RouterTestingModule],
+            declarations: [
+                ${appNameTitle}Component,
+                WelcomeComponent
+            ],
             providers: [
                 { provide: FnService, useValue: fs },
                 { provide: LogService, useValue: logSpy },
@@ -81,7 +86,7 @@
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(${appNameCap}${appNameEnd}Component);
+        fixture = TestBed.createComponent(${appNameTitle}Component);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
index d510867..d7107c4 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
@@ -13,46 +13,90 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import {LogService, WebSocketService} from 'gui2-fw-lib';
 
-const SAMPLE_CUSTOM_DATA_REQ = 'sampleCustomDataRequest';
-const SAMPLE_CUSTOM_DATA_RESP = 'sampleCustomDataResponse';
+const SAMPLE_CUSTOM_DATA_REQ = '${appNameAllLower}DataRequest';
+const SAMPLE_CUSTOM_DATA_RESP = '${appNameAllLower}DataResponse';
+
+/**
+ * Model of the data sent in ${appNameAllLower}DataResponse from ${appNameTitle}DataRequestHandler
+ */
+export interface ${appNameTitle}Data {
+    number: number;
+    square: number;
+    cube: number;
+    message: string;
+}
+
+export interface ${appNameTitle}Req {
+    reqnumber: number;
+}
 
 @Component({
     selector: '${artifactId}-app-sample',
     templateUrl: './${artifactId}.component.html',
     styleUrls: ['./${artifactId}.component.css']
 })
-export class ${appNameCap}${appNameEnd}Component implements OnInit {
-    private handlers: string[] = [];
+export class ${appNameTitle}Component implements OnInit, OnDestroy {
     private openListener: any;
 
+    socketData: ${appNameTitle}Data = <${appNameTitle}Data>{
+        number: 0,
+        square: 0,
+        cube: 0,
+        message: undefined
+    };
+    requestNumber: number = 0;
+    childSelected: string = '(none)';
+
     constructor(
         protected log: LogService,
         protected wss: WebSocketService
     ) {
-        this.log.debug('${appNameCap}${appNameEnd}Component constructed');
+        this.log.debug('${appNameTitle}Component constructed');
     }
 
     ngOnInit() {
         this.wss.bindHandlers(new Map<string, (data) => void>([
             [SAMPLE_CUSTOM_DATA_RESP, (data) => {
-                this.log.debug(SAMPLE_CUSTOM_DATA_RESP, data);
+                this.socketData = <${appNameTitle}Data>data;
+                this.log.debug(SAMPLE_CUSTOM_DATA_RESP, this.socketData);
             }
             ]
         ]));
 
-        this.handlers.push(SAMPLE_CUSTOM_DATA_RESP);
-
         // in case we fail over to a new server,
         // listen for wsock-open events
-        this.openListener = this.wss.addOpenListener(() => this.wsOpen);
+        this.openListener = this.wss.addOpenListener((h, u) => this.wsOpen(h, u));
+    }
+
+    ngOnDestroy(): void {
+        this.wss.unbindHandlers([SAMPLE_CUSTOM_DATA_RESP]);
     }
 
     wsOpen(host: string, url: string) {
         this.log.debug(SAMPLE_CUSTOM_DATA_RESP, ': WSopen - cluster node:', host, 'URL:', url);
         // tell the server we are ready to receive topo events
-        this.wss.sendEvent(SAMPLE_CUSTOM_DATA_REQ, {});
+        const requestObj = <${appNameTitle}Req>{
+            reqnumber: this.requestNumber
+        };
+        this.wss.sendEvent(SAMPLE_CUSTOM_DATA_REQ, requestObj);
+    }
+
+    // When the FetchData button is clicked
+    getData() {
+        this.requestNumber++;
+        const requestObj = <${appNameTitle}Req>{
+            reqnumber: this.requestNumber
+        };
+        this.wss.sendEvent(SAMPLE_CUSTOM_DATA_REQ, requestObj);
+        this.log.debug('Getting data', this.requestNumber);
+    }
+
+    // when we recieve an event from the child
+    childClicked(colour: string) {
+        this.log.debug('Received event', colour);
+        this.childSelected = colour;
     }
 }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html
index 819f7e2..9e6bb90 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html
@@ -14,4 +14,12 @@
 ~ limitations under the License.
 -->
 
-<p>welcome works!</p>
+<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
+    <svg:g (click)="welcomeClicked(colour)">
+        <svg:circle r="50" cx="100" cy="55" [attr.fill]="colour">
+        </svg:circle>
+        <svg:text x="100" y="60" width="200" text-anchor="middle" style="font-weight:bold;">Welcome: {{message}}</svg:text>
+        <svg:use [attr.xlink:href]="'#bird'" style="fill-opacity:0.2" width="80" height="80" x="60" y="10">
+        </svg:use>
+    </svg:g>
+</svg:svg>
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts
index db3a2f3..728d716 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import {LogService} from 'gui2-fw-lib';
 
 @Component({
@@ -22,6 +22,9 @@
   styleUrls: ['./welcome.component.css']
 })
 export class WelcomeComponent implements OnInit {
+    @Input() message: string = 'Welcome';
+    @Input() colour: string;
+    @Output() welcomeEventEmitter = new EventEmitter<string>();
 
     constructor(
         protected log: LogService,
@@ -30,6 +33,11 @@
     }
 
     ngOnInit() {
+        this.log.debug('WelcomeComponent initialized', this.message, this.colour);
     }
 
+    welcomeClicked(colour: string) {
+        this.log.debug(colour, 'WelcomeComponent clicked - sending event to parent');
+        this.welcomeEventEmitter.emit(colour);
+    }
 }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json
index 6ddb6b2..9a19c5e 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json
@@ -60,7 +60,7 @@
     "no-empty-interface": true,
     "no-eval": true,
     "no-inferrable-types": [
-      true,
+      false,
       "ignore-params"
     ],
     "no-misused-new": true,
diff --git a/web/gui2-fw-lib/.gitignore b/web/gui2-fw-lib/.gitignore
index b01fc2b..14079de 100644
--- a/web/gui2-fw-lib/.gitignore
+++ b/web/gui2-fw-lib/.gitignore
@@ -4,6 +4,7 @@
 /dist
 /tmp
 /out-tsc
+/gui2-fw-lib-*.tgz
 
 # dependencies
 /node_modules
diff --git a/web/gui2-topo-lib/.gitignore b/web/gui2-topo-lib/.gitignore
index d89d39b..afec638 100644
--- a/web/gui2-topo-lib/.gitignore
+++ b/web/gui2-topo-lib/.gitignore
@@ -4,6 +4,7 @@
 /dist
 /tmp
 /out-tsc
+/gui2-topo-lib*.tgz
 
 # dependencies
 /node_modules