diff --git a/projects/demo/src/app/app.component.css b/projects/demo/src/app/app.component.css
new file mode 100644
index 0000000..3d7cbc6
--- /dev/null
+++ b/projects/demo/src/app/app.component.css
@@ -0,0 +1,5 @@
+
+linear-gauge, radial-gauge {
+    margin-left: 20px;
+    margin-right: 40px;
+}
diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
new file mode 100644
index 0000000..b6d0db3
--- /dev/null
+++ b/projects/demo/src/app/app.component.html
@@ -0,0 +1,42 @@
+<h1>
+    {{title}}
+</h1>
+<!-- test1 options and value updated by observable 
+     and parent's options binding -->
+<radial-gauge #rgauge1
+    [options]="rgauge1Options"
+    [attr.value]="(rgauge1Observable$ | async)"
+></radial-gauge>
+
+<!-- test2 attributes and value binding to simple number property -->
+<radial-gauge #rgauge2
+    title="rgauge2"
+    width="200"
+    height="200"
+    color-plate="rgb(255,255,0)"
+    animation-rule="bounce"
+    animation-duration="700"
+    animation-target="plate"
+    [attr.value]="rgauge2Value"
+    >
+</radial-gauge> 
+
+<!-- test3 test value via setter -->
+<radial-gauge #rgauge3
+    title="rgauge3"
+    width="300"
+    height="300"
+    animation-rule="quad"
+    animation-duration="700"
+    animated-value="true" >
+</radial-gauge>
+
+<!-- test4 - test value update via update() api -->
+<linear-gauge #lgauge1
+    title="1gauge1"
+    width="100"
+    height="300"
+    animation-rule="linear"
+    animation-duration="700"
+    >
+</linear-gauge> 
diff --git a/projects/demo/src/app/app.component.spec.ts b/projects/demo/src/app/app.component.spec.ts
new file mode 100644
index 0000000..b8760f0
--- /dev/null
+++ b/projects/demo/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'ng-canvas-gauges-devtest'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('ng-canvas-gauges-devtest');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to ng-canvas-gauges-devtest!');
+  }));
+});
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
index 17a95cd..c66cce0 100644
--- a/projects/demo/src/app/app.component.ts
+++ b/projects/demo/src/app/app.component.ts
@@ -1,17 +1,78 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import { interval, Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { RadialGauge } from 'ng-canvas-gauges';
+import { LinearGauge, LinearGaugeOptions } from 'ng-canvas-gauges';
 
 @Component({
   selector: 'app-root',
-  template: `
-    <!--The content below is only a placeholder and can be replaced.-->
-    <div style="text-align:center">
-      <h1>
-      ng-canvas-gauges
-      </h1>
-    <radial-gauge width="300" height="300"></radial-gauge>
-  `,
-  styles: []
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'demo';
+export class AppComponent implements AfterViewInit {
+
+  @ViewChild('rgauge3')
+  rgauge3: RadialGauge;
+
+   @ViewChild('lgauge1')
+  lgauge1: LinearGauge;
+
+  title = 'ng-canvas-gauges demo';
+
+  rgauge1Options: any;
+
+  constructor() {
+    this.rgauge1Options = {
+      title: 'rgauge1',
+      width: 200,
+      height: 200,
+      colorPlate: 'rgb(255, 0, 255)',
+    animationRule: 'bounce',
+    animationDuration: 800
+  };
+}
+
+  rgauge1Observable$: Observable<number>;
+
+  rgauge2Value = 0;
+
+
+  ngAfterViewInit(): void {
+
+    // animate rgauge1
+    this.rgauge1Observable$ = interval(1000).pipe(
+      map(() => Math.floor(Math.random() * 100))
+    );
+
+    // change rgauge1 colorplate using parent's options binding
+    interval(5000).subscribe( () => {
+      this.rgauge1Options = {colorPlate: 'rgb(0, 255, 255)'};
+
+    });
+
+
+    // animate rgauge2
+    interval(1000).pipe(
+      map( () => Math.floor( Math.random() * 100 ))
+    ).subscribe( x => {
+      this.rgauge2Value = x;
+    });
+
+
+    // animate rgauge3
+    interval(1000).pipe(
+      map( () => Math.floor( Math.random() * 100 ))
+    ).subscribe( x => {
+      this.rgauge3.value = x;
+    });
+
+    // animate lgauge1
+    interval(1000).pipe(
+      map( () => Math.floor( Math.random() * 100 ))
+    ).subscribe( x => {
+      this.lgauge1.update( {value: x} as LinearGaugeOptions );
+    });
+  }
+
+
 }
diff --git a/projects/demo/src/app/app.module.ts b/projects/demo/src/app/app.module.ts
index ea9b75d..9cca454 100644
--- a/projects/demo/src/app/app.module.ts
+++ b/projects/demo/src/app/app.module.ts
@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import { GaugesModule } from 'projects/ng-canvas-gauges/src/public_api';
+import { GaugesModule } from 'ng-canvas-gauges';
 
 
 @NgModule({