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,