diff --git a/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.css b/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.css
new file mode 100644
index 000000000..d5afcebec
--- /dev/null
+++ b/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.css
@@ -0,0 +1,26 @@
+.sample-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.buttons-container {
+  display: flex;
+  margin-bottom: 5px;
+}
+
+.sample-button {
+  margin: 3px;
+  flex-grow: 1;
+  height: 30px;
+  font: 12px Titillium Web, sans-serif;
+  min-width:5.5rem;
+  height:2.25rem;
+  font-size:.875rem;
+  font-weight:600;
+  line-height:1;
+  text-align:center;
+  border:none;
+  border-radius:2px;
+  text-transform:uppercase;
+  cursor:pointer;
+}
diff --git a/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.html b/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.html
new file mode 100644
index 000000000..c16534c80
--- /dev/null
+++ b/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.html
@@ -0,0 +1,49 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>You can read more about configuring the bullet graph component in the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/bulletgraph.html" target="_blank"> official documentation page.
+    </a>
+  </p>
+  <div class="sample-container">
+    <div class="buttons-container">
+      <button igxButton="raised" (click)="AnimateToGauge1()"
+          igxButtonColor="black"
+          igxButtonBackground="#e2e2e2"
+          class="sample-button">Gauge Animation #1</button>
+      <button igxButton="raised" (click)="AnimateToGauge2()"
+          igxButtonColor="black"
+          igxButtonBackground="#e2e2e2"
+          class="sample-button">Gauge Animation #2</button>
+      <button igxButton="raised" (click)="AnimateToGauge3()"
+          igxButtonColor="black"
+          igxButtonBackground="#e2e2e2"
+          class="sample-button">Gauge Animation #3</button>
+    </div>
+
+    <div class="sample-control">
+      <!-- Note the bullet graph requires settings only for
+      minimumValue, maximumValue, and value, targetValue properties.
+      All other properties are optional and listed here
+      for demonstration purpose only -->
+      <igx-bullet-graph
+        #bulletGraph
+        height="80px"
+        width="100%"
+        minimumValue=0
+        maximumValue=120
+        valueBrush="#4286f4"
+        value=70
+        targetValueBrush="#4286f4"
+        targetValue=90
+        targetValueBreadth=10
+        interval=10
+        labelInterval=10
+        labelExtent=0.02
+        rangeBrushes ="#FF9800, #F96232, #C62828"
+        rangeOutlines="#FF9800, #F96232, #C62828"
+        scaleBackgroundThickness=0
+        scaleBackgroundBrush="#dbdbdb"
+        scaleBackgroundOutline="gray">
+      </igx-bullet-graph>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.spec.ts b/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.spec.ts
new file mode 100644
index 000000000..9e125f078
--- /dev/null
+++ b/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.spec.ts
@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { $(ClassName)Component } from './$(filePrefix).component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxBulletGraphModule } from 'igniteui-angular-gauges/ES5/igx-bullet-graph-module';
+
+describe('$(ClassName)Component', () => {
+  let component: $(ClassName)Component;
+  let fixture: ComponentFixture<$(ClassName)Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [$(ClassName)Component],
+      imports: [IgxBulletGraphModule, NoopAnimationsModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent($(ClassName)Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.ts b/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.ts
new file mode 100644
index 000000000..7287b15b4
--- /dev/null
+++ b/templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.ts
@@ -0,0 +1,235 @@
+
+import { AfterViewInit, Component, ViewEncapsulation, ViewChild } from "@angular/core";
+import { IgxLinearGraphRangeComponent } from "igniteui-angular-gauges/ES5/igx-linear-graph-range-component";
+import { IgxBulletGraphComponent } from "igniteui-angular-gauges/ES5/igx-bullet-graph-component";
+
+@Component({
+  selector: "app-$(filePrefix)",
+  templateUrl: "./$(filePrefix).component.html",
+  styleUrls: ["./$(filePrefix).component.css"],
+  encapsulation: ViewEncapsulation.None
+})
+export class $(ClassName)Component implements AfterViewInit {
+
+  @ViewChild("bulletGraph")
+  public bulletGraph: IgxBulletGraphComponent;
+
+  public ngAfterViewInit(): void {
+
+    // enabling animation duration (in milliseconds)
+    this.bulletGraph.transitionDuration = 500;
+    this.AnimateToGauge3();
+  }
+
+  public AnimateToGauge3(): void {
+
+    this.bulletGraph.minimumValue = 0;
+    this.bulletGraph.maximumValue = 120;
+    this.bulletGraph.value = 70;
+    this.bulletGraph.interval = 10;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 10;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = "#000000";
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = "#000000";
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 90;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 40;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 40;
+    range2.endValue = 80;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 80;
+    range3.endValue = 120;
+
+    this.bulletGraph.rangeBrushes  = [ "#FF9800", "#F96232", "#C62828"];
+    this.bulletGraph.rangeOutlines = [ "#FF9800", "#F96232", "#C62828"];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+    this.bulletGraph.ranges.add(range3);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = "#dbdbdb";
+    this.bulletGraph.scaleBackgroundOutline = "gray";
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = "#f7f7f7";
+    this.bulletGraph.backingOutline = "#d1d1d1";
+    this.bulletGraph.backingStrokeThickness = 0;
+
+  }
+
+  public AnimateToGauge2(): void {
+
+    this.bulletGraph.minimumValue = 100;
+    this.bulletGraph.maximumValue = 200;
+    this.bulletGraph.value = 120;
+    this.bulletGraph.interval = 10;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 10;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = "#000000";
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = "#000000";
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 180;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 100;
+    range1.endValue = 125;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 125;
+    range2.endValue = 150;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 150;
+    range3.endValue = 175;
+    const range4 = new IgxLinearGraphRangeComponent();
+    range4.startValue = 175;
+    range4.endValue = 200;
+
+    this.bulletGraph.rangeBrushes  = [ "#0078C8", "#0099FF", "#21A7FF", "#4FB9FF"];
+    this.bulletGraph.rangeOutlines = [ "#0078C8", "#0099FF", "#21A7FF", "#4FB9FF"];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+    this.bulletGraph.ranges.add(range3);
+    this.bulletGraph.ranges.add(range4);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = "#dbdbdb";
+    this.bulletGraph.scaleBackgroundOutline = "gray";
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = "#f7f7f7";
+    this.bulletGraph.backingOutline = "#d1d1d1";
+    this.bulletGraph.backingStrokeThickness = 0;
+  }
+
+  public AnimateToGauge1(): void {
+
+    this.bulletGraph.minimumValue = 0;
+    this.bulletGraph.maximumValue = 80;
+    this.bulletGraph.value = 70;
+    this.bulletGraph.interval = 20;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 20;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = "#000000";
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = "#000000";
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 60;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 40;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 40;
+    range2.endValue = 80;
+
+    this.bulletGraph.rangeBrushes  = [ "#a4bd29", "#F86232" ];
+    this.bulletGraph.rangeOutlines = [ "#a4bd29", "#F86232" ];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = "#dbdbdb";
+    this.bulletGraph.scaleBackgroundOutline = "gray";
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = "#f7f7f7";
+    this.bulletGraph.backingOutline = "#d1d1d1";
+    this.bulletGraph.backingStrokeThickness = 0;
+
+  }
+}
diff --git a/templates/angular/igx-ts/bullet-graph/default/index.ts b/templates/angular/igx-ts/bullet-graph/default/index.ts
new file mode 100644
index 000000000..d36de5441
--- /dev/null
+++ b/templates/angular/igx-ts/bullet-graph/default/index.ts
@@ -0,0 +1,20 @@
+import { IgniteUIForAngularTemplate } from "../../../../../lib/templates/IgniteUIForAngularTemplate";
+
+class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Bullet Graph"];
+		this.controlGroup = "Gauges";
+		this.listInComponentTemplates = true;
+		this.id = "bullet-graph";
+		this.projectType = "igx-ts";
+		this.name = "Bullet Graph";
+		this.description = "Graph with different animations.";
+		this.dependencies = [{
+			from: "igniteui-angular-gauges/ES5/igx-bullet-graph-module",
+			import: ["IgxBulletGraphModule"]
+		}];
+		this.packages = ["tslib@1.7.1", "igniteui-angular-core@6.1.1", "igniteui-angular-gauges@6.1.1"];
+	}
+}
+module.exports = new IgxBulletGraphTemplate();
diff --git a/templates/angular/igx-ts/bullet-graph/index.ts b/templates/angular/igx-ts/bullet-graph/index.ts
new file mode 100644
index 000000000..c1b7a0682
--- /dev/null
+++ b/templates/angular/igx-ts/bullet-graph/index.ts
@@ -0,0 +1,14 @@
+
+import { BaseComponent } from "../../../../lib/BaseComponent";
+
+class IgxBulletGraphAnimationComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Bullet Graph";
+		this.group = "Gauges";
+	}
+}
+module.exports = new IgxBulletGraphAnimationComponent();
diff --git a/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.css b/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.css
new file mode 100644
index 000000000..d5afcebec
--- /dev/null
+++ b/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.css
@@ -0,0 +1,26 @@
+.sample-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.buttons-container {
+  display: flex;
+  margin-bottom: 5px;
+}
+
+.sample-button {
+  margin: 3px;
+  flex-grow: 1;
+  height: 30px;
+  font: 12px Titillium Web, sans-serif;
+  min-width:5.5rem;
+  height:2.25rem;
+  font-size:.875rem;
+  font-weight:600;
+  line-height:1;
+  text-align:center;
+  border:none;
+  border-radius:2px;
+  text-transform:uppercase;
+  cursor:pointer;
+}
diff --git a/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.html b/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.html
new file mode 100644
index 000000000..c9461d916
--- /dev/null
+++ b/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.html
@@ -0,0 +1,54 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>You can read more about configuring the linear gauge component in the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/lineargauge.html" target="_blank">official documentation page
+  </a>.
+  </p>
+  <div class="sample-container">
+    <div class="buttons-container">
+      <button igxButton="raised" (click)="AnimateToGauge1()"
+          igxButtonColor="black"
+          igxButtonBackground="#e2e2e2"
+          class="sample-button">Gauge Animation #1</button>
+      <button igxButton="raised" (click)="AnimateToGauge2()"
+          igxButtonColor="black"
+          igxButtonBackground="#e2e2e2"
+          class="sample-button">Gauge Animation #2</button>
+      <button igxButton="raised" (click)="AnimateToGauge3()"
+          igxButtonColor="black"
+          igxButtonBackground="#e2e2e2"
+          class="sample-button">Gauge Animation #3</button>
+    </div>
+
+    <div class="sample-control" >
+      <!-- Note the linear gauge requires settings only for
+      minimumValue, maximumValue, and value properties.
+      All other properties are optional and listed here
+      for demonstration purpose only -->
+      <igx-linear-gauge
+        #linearGauge
+        height="80px"
+        width="100%"
+        minimumValue=0
+        maximumValue=100
+        value=50
+        interval=10
+        labelInterval=10
+        labelExtent=0.02
+        minorTickEndExtent=0.10,
+        minorTickStartExtent=0.20,
+        tickStartExtent=0.25,
+        tickEndExtent=0.05,
+        tickStrokeThickness=2,
+        needleShape="Needle"
+        needleBrush="#79797a"
+        needleOutline="#79797a"
+        scaleStrokeThickness=0
+        scaleBrush="#ffffff"
+        scaleOutline="#d3d3d3"
+        backingBrush="#ffffff"
+        backingOutline="#d1d1d1"
+        backingStrokeThickness=0>
+      </igx-linear-gauge>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.spec.ts b/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.spec.ts
new file mode 100644
index 000000000..1495b08f3
--- /dev/null
+++ b/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.spec.ts
@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { $(ClassName)Component } from './$(filePrefix).component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxLinearGaugeModule } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-module';
+
+describe('$(ClassName)Component', () => {
+  let component: $(ClassName)Component;
+  let fixture: ComponentFixture<$(ClassName)Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [$(ClassName)Component],
+      imports: [IgxLinearGaugeModule, NoopAnimationsModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent($(ClassName)Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.ts b/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.ts
new file mode 100644
index 000000000..65ffcab3b
--- /dev/null
+++ b/templates/angular/igx-ts/linear-gauge/default/files/src/app/__path__/__name__.component.ts
@@ -0,0 +1,236 @@
+import { Component, AfterViewInit, ViewEncapsulation, ViewChild } from '@angular/core';
+import { IgxLinearGaugeComponent } from "igniteui-angular-gauges/ES5/igx-linear-gauge-component";
+import { IgxLinearGraphRangeComponent } from "igniteui-angular-gauges/ES5/igx-linear-graph-range-component";
+import { LinearGraphNeedleShape } from "igniteui-angular-gauges/ES5/LinearGraphNeedleShape";
+
+@Component({
+  selector: 'app-$(filePrefix)',
+  templateUrl: './$(filePrefix).component.html',
+  styleUrls: ['./$(filePrefix).component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class $(ClassName)Component implements AfterViewInit {
+
+  @ViewChild("linearGauge")
+  public linearGauge: IgxLinearGaugeComponent;
+
+  public ngAfterViewInit(): void {
+
+    // enabling animation duration (in milliseconds)
+    this.linearGauge.transitionDuration = 500;
+    this.AnimateToGauge3();
+  }
+
+  public AnimateToGauge3(): void {
+    // linear gauge requires settings for these properties:
+    this.linearGauge.minimumValue = 0;
+    this.linearGauge.maximumValue = 100;
+    this.linearGauge.value = 50;
+    this.linearGauge.interval = 10;
+
+    // setting custom appearance of labels
+    this.linearGauge.labelInterval = 10;
+    this.linearGauge.labelExtent = 0.05;
+
+    // setting custom appearance of needle
+    this.linearGauge.isNeedleDraggingEnabled = true;
+    this.linearGauge.needleShape = LinearGraphNeedleShape.Needle;
+    this.linearGauge.needleBrush = "#79797a";
+    this.linearGauge.needleOutline = "#ffffffff";
+    this.linearGauge.needleStrokeThickness = 1;
+    this.linearGauge.needleOuterExtent = 0.9;
+    this.linearGauge.needleInnerExtent = 0.3;
+
+    // setting custom appearance of major/minor ticks
+    this.linearGauge.minorTickCount = 5;
+    this.linearGauge.minorTickEndExtent = 0.10;
+    this.linearGauge.minorTickStartExtent = 0.20;
+    this.linearGauge.minorTickStrokeThickness = 1;
+    this.linearGauge.tickStartExtent = 0.25;
+    this.linearGauge.tickEndExtent = 0.05;
+    this.linearGauge.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 30;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 30;
+    range2.endValue = 70;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 70;
+    range3.endValue = 100;
+
+    this.linearGauge.rangeBrushes  = [ "#9FB328", "#438C47", "#3F51B5"];
+    this.linearGauge.rangeOutlines = [ "#9FB328", "#438C47", "#3F51B5"];
+    this.linearGauge.ranges.clear();
+    this.linearGauge.ranges.add(range1);
+    this.linearGauge.ranges.add(range2);
+    this.linearGauge.ranges.add(range3);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.linearGauge.ranges.count; i++) {
+      const range = this.linearGauge.ranges.item(i);
+      range.innerStartExtent = 0.075;
+      range.innerEndExtent = 0.075;
+      range.outerStartExtent = 0.65;
+      range.outerEndExtent = 0.65;
+    }
+
+    // setting extent of gauge scale
+    this.linearGauge.scaleStrokeThickness = 0;
+    this.linearGauge.scaleBrush = "#ffffff";
+    this.linearGauge.scaleOutline = "#dbdbdb";
+    this.linearGauge.scaleInnerExtent = 0.075;
+    this.linearGauge.scaleOuterExtent = 0.85;
+    this.linearGauge.scaleStartExtent = 0.05;
+    this.linearGauge.scaleEndExtent = 0.95;
+
+    // setting appearance of backing fill and outline
+    this.linearGauge.backingBrush = "#ffffff";
+    this.linearGauge.backingOutline = "#d1d1d1";
+    this.linearGauge.backingStrokeThickness = 0;
+}
+
+  public AnimateToGauge2(): void {
+       // linear gauge requires settings for these properties:
+       this.linearGauge.minimumValue = 100;
+       this.linearGauge.maximumValue = 200;
+       this.linearGauge.value = 150;
+       this.linearGauge.interval = 20;
+
+       // setting custom appearance of labels
+       this.linearGauge.labelInterval = 20;
+       this.linearGauge.labelExtent = 0.05;
+
+       // setting custom appearance of needle
+       this.linearGauge.isNeedleDraggingEnabled = true;
+       this.linearGauge.needleShape = LinearGraphNeedleShape.Triangle;
+       this.linearGauge.needleBrush = "#79797a";
+       this.linearGauge.needleOutline = "#ffffffff";
+       this.linearGauge.needleStrokeThickness = 1;
+       this.linearGauge.needleOuterExtent = 0.9;
+       this.linearGauge.needleInnerExtent = 0.3;
+
+       // setting custom appearance of major/minor ticks
+       this.linearGauge.minorTickCount = 4;
+       this.linearGauge.minorTickEndExtent = 0.10;
+       this.linearGauge.minorTickStartExtent = 0.20;
+       this.linearGauge.minorTickStrokeThickness = 1;
+       this.linearGauge.tickStartExtent = 0.25;
+       this.linearGauge.tickEndExtent = 0.05;
+       this.linearGauge.tickStrokeThickness = 2;
+
+       // setting custom gauge ranges
+       const range1 = new IgxLinearGraphRangeComponent();
+       range1.startValue = 100;
+       range1.endValue = 125;
+       const range2 = new IgxLinearGraphRangeComponent();
+       range2.startValue = 125;
+       range2.endValue = 150;
+       const range3 = new IgxLinearGraphRangeComponent();
+       range3.startValue = 150;
+       range3.endValue = 175;
+       const range4 = new IgxLinearGraphRangeComponent();
+       range4.startValue = 175;
+       range4.endValue = 200;
+
+       this.linearGauge.rangeBrushes  = [ "#0078C8", "#0099FF", "#21A7FF", "#4FB9FF"];
+       this.linearGauge.rangeOutlines = [ "#0078C8", "#0099FF", "#21A7FF", "#4FB9FF"];
+       this.linearGauge.ranges.clear();
+       this.linearGauge.ranges.add(range1);
+       this.linearGauge.ranges.add(range2);
+       this.linearGauge.ranges.add(range3);
+       this.linearGauge.ranges.add(range4);
+
+       // setting extent of all gauge ranges
+       for (let i = 0; i < this.linearGauge.ranges.count; i++) {
+         const range = this.linearGauge.ranges.item(i);
+         range.innerStartExtent = 0.075;
+         range.innerEndExtent = 0.075;
+         range.outerStartExtent = 0.65;
+         range.outerEndExtent = 0.65;
+       }
+
+       // setting extent of gauge scale
+       this.linearGauge.scaleStrokeThickness = 0;
+       this.linearGauge.scaleBrush = "#ffffff";
+       this.linearGauge.scaleOutline = "#dbdbdb";
+       this.linearGauge.scaleInnerExtent = 0.075;
+       this.linearGauge.scaleOuterExtent = 0.85;
+       this.linearGauge.scaleStartExtent = 0.05;
+       this.linearGauge.scaleEndExtent = 0.95;
+
+       // setting appearance of backing fill and outline
+       this.linearGauge.backingBrush = "#ffffff";
+       this.linearGauge.backingOutline = "#d1d1d1";
+       this.linearGauge.backingStrokeThickness = 0;
+  }
+
+  public AnimateToGauge1(): void {
+    // linear gauge requires settings for these properties:
+    this.linearGauge.minimumValue = 0;
+    this.linearGauge.maximumValue = 80;
+    this.linearGauge.value = 60;
+    this.linearGauge.interval = 20;
+
+    // setting custom appearance of labels
+    this.linearGauge.labelInterval = 20;
+    this.linearGauge.labelExtent = 0.05;
+
+    // setting custom appearance of needle
+    this.linearGauge.isNeedleDraggingEnabled = true;
+    this.linearGauge.needleShape = LinearGraphNeedleShape.Trapezoid;
+    this.linearGauge.needleBrush = "#79797a";
+    this.linearGauge.needleOutline = "#ffffffff";
+    this.linearGauge.needleStrokeThickness = 1;
+    this.linearGauge.needleOuterExtent = 0.9;
+    this.linearGauge.needleInnerExtent = 0.3;
+
+    // setting custom appearance of major/minor ticks
+    this.linearGauge.minorTickCount = 5;
+    this.linearGauge.minorTickEndExtent = 0.10;
+    this.linearGauge.minorTickStartExtent = 0.20;
+    this.linearGauge.minorTickStrokeThickness = 1;
+    this.linearGauge.tickStartExtent = 0.25;
+    this.linearGauge.tickEndExtent = 0.05;
+    this.linearGauge.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 40;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 40;
+    range2.endValue = 80;
+
+    this.linearGauge.rangeBrushes  = [ "#a4bd29", "#F86232" ];
+    this.linearGauge.rangeOutlines = [ "#a4bd29", "#F86232" ];
+    this.linearGauge.ranges.clear();
+    this.linearGauge.ranges.add(range1);
+    this.linearGauge.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.linearGauge.ranges.count; i++) {
+      const range = this.linearGauge.ranges.item(i);
+      range.innerStartExtent = 0.075;
+      range.innerEndExtent = 0.075;
+      range.outerStartExtent = 0.65;
+      range.outerEndExtent = 0.65;
+    }
+
+    // setting extent of gauge scale
+    this.linearGauge.scaleStrokeThickness = 0;
+    this.linearGauge.scaleBrush = "#ffffff";
+    this.linearGauge.scaleOutline = "#dbdbdb";
+    this.linearGauge.scaleInnerExtent = 0.075;
+    this.linearGauge.scaleOuterExtent = 0.85;
+    this.linearGauge.scaleStartExtent = 0.05;
+    this.linearGauge.scaleEndExtent = 0.95;
+
+    // setting appearance of backing fill and outline
+    this.linearGauge.backingBrush = "#ffffff";
+    this.linearGauge.backingOutline = "#d1d1d1";
+    this.linearGauge.backingStrokeThickness = 0;
+  }
+}
diff --git a/templates/angular/igx-ts/linear-gauge/default/index.ts b/templates/angular/igx-ts/linear-gauge/default/index.ts
new file mode 100644
index 000000000..7e5457cc8
--- /dev/null
+++ b/templates/angular/igx-ts/linear-gauge/default/index.ts
@@ -0,0 +1,21 @@
+import { IgniteUIForAngularTemplate } from "../../../../../lib/templates/IgniteUIForAngularTemplate";
+
+class IgxLinearGaugeTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Linear Gauge"];
+		this.controlGroup = "Gauges";
+		this.listInComponentTemplates = true;
+		this.id = "linear-gauge";
+		this.projectType = "igx-ts";
+		this.name = "Linear Gauge";
+		this.description = "IgxLinearGauge with different animations.";
+		this.dependencies = [
+			{
+				from: "igniteui-angular-gauges/ES5/igx-linear-gauge-module",
+				import: ["IgxLinearGaugeModule"]}
+		];
+		this.packages = ["tslib@1.7.1", "igniteui-angular-core@6.1.1", "igniteui-angular-gauges@6.1.1"];
+	}
+}
+module.exports = new IgxLinearGaugeTemplate();
diff --git a/templates/angular/igx-ts/linear-gauge/index.ts b/templates/angular/igx-ts/linear-gauge/index.ts
new file mode 100644
index 000000000..cef278069
--- /dev/null
+++ b/templates/angular/igx-ts/linear-gauge/index.ts
@@ -0,0 +1,14 @@
+
+import { BaseComponent } from "../../../../lib/BaseComponent";
+
+class IgxLinearGaugeComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Linear Gauge";
+		this.group = "Gauges";
+	}
+}
+module.exports = new IgxLinearGaugeComponent();
diff --git a/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.css b/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.css
new file mode 100644
index 000000000..d5afcebec
--- /dev/null
+++ b/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.css
@@ -0,0 +1,26 @@
+.sample-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.buttons-container {
+  display: flex;
+  margin-bottom: 5px;
+}
+
+.sample-button {
+  margin: 3px;
+  flex-grow: 1;
+  height: 30px;
+  font: 12px Titillium Web, sans-serif;
+  min-width:5.5rem;
+  height:2.25rem;
+  font-size:.875rem;
+  font-weight:600;
+  line-height:1;
+  text-align:center;
+  border:none;
+  border-radius:2px;
+  text-transform:uppercase;
+  cursor:pointer;
+}
diff --git a/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.html b/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.html
new file mode 100644
index 000000000..a549306a5
--- /dev/null
+++ b/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.html
@@ -0,0 +1,73 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>You can read more about configuring the radial gauge component in the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/radialgauge.html" target="_blank">
+    official documentation page
+    </a>.
+  </p>
+  <div class="sample-container">
+    <div class="buttons-container">
+      <button igxButton="raised" (click)="AnimateToGauge1()"
+        igxButtonColor="black"
+        igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #1</button>
+      <button igxButton="raised" (click)="AnimateToGauge2()"
+        igxButtonColor="black"
+        igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #2</button>
+      <button igxButton="raised" (click)="AnimateToGauge3()"
+        igxButtonColor="black"
+        igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #3</button>
+      <button igxButton="raised" (click)="AnimateToGauge4()"
+        igxButtonColor="black"
+        igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #4</button>
+    </div>
+
+    <div class="sample-control" >
+      <!-- Note the radial gauge requires settings only for
+      minimumValue, maximumValue, and value properties.
+      All other properties are optional and listed here
+      for demonstration purpose only -->
+      <igx-radial-gauge
+        #radialGauge
+        height="330px"
+        width="100%"
+        value=25
+        interval=5
+        minimumValue=0
+        maximumValue=50
+        labelInterval=5
+        labelExtent=0.71
+        minorTickCount=4
+        minorTickEndExtent=.625
+        minorTickStartExtent=.6
+        minorTickStrokeThickness=1
+        minorTickBrush = "#79797a"
+        tickStartExtent=.6
+        tickEndExtent=.65
+        tickStrokeThickness=2
+        tickBrush = "#79797a"
+        needleShape="Triangle"
+        needleEndWidthRatio=0.03
+        needleStartWidthRatio=0.05
+        needlePivotShape="CircleOverlay"
+        needlePivotWidthRatio=0.15
+        needleBaseFeatureWidthRatio=0.15
+        needleBrush="#79797a"
+        needleOutline="#79797a"
+        needlePivotBrush="#79797a"
+        needlePivotOutline="#79797a"
+        isNeedleDraggingEnabled=true
+        backingBrush="#fcfcfc"
+        backingOutline="#d6d6d6"
+        backingStrokeThickness=5
+        scaleStartAngle=120
+        scaleEndAngle=60
+        scaleBrush="#d6d6d6"
+        rangeBrushes="#F86232, #DC3F76, #7446B9"
+        rangeOutlines="#F86232, #DC3F76, #7446B9">
+      </igx-radial-gauge>
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.spec.ts b/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.spec.ts
new file mode 100644
index 000000000..298215b86
--- /dev/null
+++ b/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.spec.ts
@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { $(ClassName)Component } from './$(filePrefix).component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxRadialGaugeModule } from 'igniteui-angular-gauges/ES5/igx-radial-gauge-module';
+
+describe('$(ClassName)Component', () => {
+  let component: $(ClassName)Component;
+  let fixture: ComponentFixture<$(ClassName)Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [$(ClassName)Component],
+      imports: [IgxRadialGaugeModule, NoopAnimationsModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent($(ClassName)Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.ts b/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.ts
new file mode 100644
index 000000000..b1c1fa714
--- /dev/null
+++ b/templates/angular/igx-ts/radial-gauge/default/files/src/app/__path__/__name__.component.ts
@@ -0,0 +1,284 @@
+import { Component, AfterViewInit, ViewEncapsulation, ViewChild } from '@angular/core';
+// radial gauge imports
+import { SweepDirection } from 'igniteui-angular-core/ES5/SweepDirection';
+import { IgxRadialGaugeComponent } from 'igniteui-angular-gauges/ES5/igx-radial-gauge-component';
+import { IgxRadialGaugeRangeComponent } from 'igniteui-angular-gauges/ES5/igx-radial-gauge-range-component';
+import { RadialGaugeBackingShape } from 'igniteui-angular-gauges/ES5/RadialGaugeBackingShape';
+import { RadialGaugeNeedleShape } from 'igniteui-angular-gauges/ES5/RadialGaugeNeedleShape';
+import { RadialGaugePivotShape } from 'igniteui-angular-gauges/ES5/RadialGaugePivotShape';
+import { RadialGaugeScaleOversweepShape } from 'igniteui-angular-gauges/ES5/RadialGaugeScaleOversweepShape';
+
+@Component({
+  selector: 'app-$(filePrefix)',
+  templateUrl: './$(filePrefix).component.html',
+  styleUrls: ['./$(filePrefix).component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class $(ClassName)Component implements AfterViewInit {
+
+  @ViewChild("radialGauge")
+  public radialGauge: IgxRadialGaugeComponent;
+
+  public ngAfterViewInit(): void {
+
+    // enabling animation duration (in milliseconds)
+    this.radialGauge.transitionDuration = 500;
+    this.AnimateToGauge3();
+  }
+
+  public AnimateToGauge4(): void {
+
+    this.radialGauge.height = "330px";
+    this.radialGauge.width = "100%";
+    this.radialGauge.minimumValue = 0;
+    this.radialGauge.maximumValue = 80;
+    this.radialGauge.value = 10;
+    this.radialGauge.interval = 10;
+
+    // Label Settings
+    this.radialGauge.labelExtent = 0.6;
+    this.radialGauge.labelInterval = 10;
+    this.radialGauge.font = "10px Verdana,Arial";
+
+    // Scale Settings
+    this.radialGauge.scaleStartAngle = 150;
+    this.radialGauge.scaleEndAngle = 30;
+    this.radialGauge.scaleBrush = "#0b8fed";
+    this.radialGauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Auto;
+    this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
+    this.radialGauge.scaleEndExtent = 0.825;
+    this.radialGauge.scaleStartExtent = 0.775;
+
+    this.radialGauge.minorTickStartExtent = 0.7;
+    this.radialGauge.minorTickEndExtent = 0.75;
+    this.radialGauge.tickStartExtent = 0.675;
+    this.radialGauge.tickEndExtent = 0.75;
+
+    // Backing Settings
+    this.radialGauge.backingShape = RadialGaugeBackingShape.Fitted;
+    this.radialGauge.backingBrush = "#fcfcfc";
+    this.radialGauge.backingOutline = "#d6d6d6";
+    this.radialGauge.backingOversweep = 5;
+    this.radialGauge.backingCornerRadius = 10;
+    this.radialGauge.backingOuterExtent = 0.9;
+
+    // Needle Settings
+    this.radialGauge.needleShape = RadialGaugeNeedleShape.NeedleWithBulb;
+    this.radialGauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
+    this.radialGauge.needleEndExtent = 0.5;
+    this.radialGauge.needlePointFeatureExtent = 0.3;
+    this.radialGauge.needlePivotWidthRatio = 0.2;
+    this.radialGauge.needleBrush = "#9f9fa0";
+    this.radialGauge.needleOutline = "#9f9fa0";
+    this.radialGauge.needlePivotBrush = "#9f9fa0";
+    this.radialGauge.needlePivotOutline = "#9f9fa0";
+
+    // TickMark Settings
+    this.radialGauge.tickBrush = "rgba(51, 51, 51, 1)";
+    this.radialGauge.minorTickBrush = "rgba(73, 73, 73, 1)";
+    this.radialGauge.minorTickCount = 6;
+
+    this.radialGauge.ranges.clear();
+  }
+
+  public AnimateToGauge3(): void {
+
+    this.radialGauge.height = "330px";
+    this.radialGauge.width = "100%";
+
+    this.radialGauge.minimumValue = 0;
+    this.radialGauge.maximumValue = 50;
+    this.radialGauge.value = 25;
+    this.radialGauge.interval = 5;
+
+    // setting appearance of labels
+    this.radialGauge.labelInterval = 5;
+    this.radialGauge.labelExtent = 0.71;
+    this.radialGauge.font = "10px Verdana,Arial";
+
+    // setting custom needle
+    this.radialGauge.isNeedleDraggingEnabled = true;
+    this.radialGauge.needleEndExtent = 0.5;
+    this.radialGauge.needleShape = RadialGaugeNeedleShape.Triangle;
+    this.radialGauge.needleEndWidthRatio = 0.03;
+    this.radialGauge.needleStartWidthRatio = 0.05;
+    this.radialGauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
+    this.radialGauge.needlePivotWidthRatio = 0.15;
+    this.radialGauge.needleBaseFeatureWidthRatio = 0.15;
+    this.radialGauge.needleBrush = "#79797a";
+    this.radialGauge.needleOutline = "#79797a";
+    this.radialGauge.needlePivotBrush = "#79797a";
+    this.radialGauge.needlePivotOutline = "#79797a";
+
+    // setting appearance of major/minor ticks
+    this.radialGauge.minorTickCount = 4;
+    this.radialGauge.minorTickEndExtent = 0.625;
+    this.radialGauge.minorTickStartExtent = 0.6;
+    this.radialGauge.minorTickStrokeThickness = 1;
+    this.radialGauge.minorTickBrush = "#79797a";
+    this.radialGauge.tickStartExtent = 0.6;
+    this.radialGauge.tickEndExtent = 0.65;
+    this.radialGauge.tickStrokeThickness = 2;
+    this.radialGauge.tickBrush = "#79797a";
+
+    // setting extent of gauge scale
+    this.radialGauge.scaleStartAngle = 120;
+    this.radialGauge.scaleEndAngle = 60;
+    this.radialGauge.scaleBrush = "#d6d6d6";
+    this.radialGauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Fitted;
+    this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
+    this.radialGauge.scaleEndExtent = 0.57;
+    this.radialGauge.scaleStartExtent = 0.5;
+
+    // setting appearance of backing dial
+    this.radialGauge.backingBrush = "#fcfcfc";
+    this.radialGauge.backingOutline = "#d6d6d6";
+    this.radialGauge.backingStrokeThickness = 5;
+    this.radialGauge.backingShape = RadialGaugeBackingShape.Circular;
+
+    // setting custom gauge ranges
+    const range1 = new IgxRadialGaugeRangeComponent();
+    range1.startValue = 5;
+    range1.endValue = 15;
+    const range2 = new IgxRadialGaugeRangeComponent();
+    range2.startValue = 15;
+    range2.endValue = 35;
+    const range3 = new IgxRadialGaugeRangeComponent();
+    range3.startValue = 35;
+    range3.endValue = 45;
+    this.radialGauge.rangeBrushes  = [ "#F86232", "#DC3F76", "#7446B9"];
+    this.radialGauge.rangeOutlines = [ "#F86232", "#DC3F76", "#7446B9"];
+    this.radialGauge.ranges.clear();
+    this.radialGauge.ranges.add(range1);
+    this.radialGauge.ranges.add(range2);
+    this.radialGauge.ranges.add(range3);
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.radialGauge.ranges.count; i++) {
+      const range = this.radialGauge.ranges.item(i);
+      range.innerStartExtent = 0.5;
+      range.innerEndExtent = 0.5;
+      range.outerStartExtent = 0.57;
+      range.outerEndExtent = 0.57;
+    }
+  }
+
+  public AnimateToGauge2(): void {
+
+    this.radialGauge.height = "330px";
+    this.radialGauge.width = "100%";
+
+    this.radialGauge.minimumValue = 100;
+    this.radialGauge.maximumValue = 200;
+    this.radialGauge.value = 125;
+
+    // Scale Settings
+    this.radialGauge.scaleStartAngle = 135;
+    this.radialGauge.scaleEndAngle = 45;
+    this.radialGauge.scaleBrush = "transparent";
+    this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
+
+    // Backing Settings
+    this.radialGauge.backingOutline = "white";
+    this.radialGauge.backingBrush = "white";
+
+    // Needle Settings
+    this.radialGauge.needleEndExtent = 0.8;
+    this.radialGauge.needleShape = RadialGaugeNeedleShape.Triangle;
+    this.radialGauge.needlePivotShape = RadialGaugePivotShape.Circle;
+    this.radialGauge.needlePivotWidthRatio = 0.1;
+    this.radialGauge.needleBrush = "#79797a";
+    this.radialGauge.needleOutline = "#79797a";
+
+    // TickMark Settings
+    this.radialGauge.tickBrush = "transparent";
+    this.radialGauge.minorTickBrush = "transparent";
+
+    // Label Settings
+    this.radialGauge.labelInterval = 100;
+    this.radialGauge.labelExtent = 1;
+    this.radialGauge.font = "15px Verdana,Arial";
+
+    // setting custom gauge ranges
+    const range1 = new IgxRadialGaugeRangeComponent();
+    range1.startValue = 100;
+    range1.endValue = 150;
+    const range2 = new IgxRadialGaugeRangeComponent();
+    range2.startValue = 150;
+    range2.endValue = 200;
+
+    this.radialGauge.rangeBrushes  = [ "#32f845", "#bf32f8" ];
+    this.radialGauge.rangeOutlines = [ "#32f845", "#bf32f8" ];
+    this.radialGauge.ranges.clear();
+    this.radialGauge.ranges.add(range1);
+    this.radialGauge.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.radialGauge.ranges.count; i++) {
+      const range = this.radialGauge.ranges.item(i);
+      range.innerStartExtent = 0.3;
+      range.innerEndExtent = 0.3;
+      range.outerStartExtent = 0.9;
+      range.outerEndExtent = 0.9;
+    }
+  }
+
+  public AnimateToGauge1(): void {
+
+    this.radialGauge.height = "330px";
+    this.radialGauge.width = "100%";
+
+    this.radialGauge.minimumValue = 0;
+    this.radialGauge.maximumValue = 10;
+    this.radialGauge.value = 7.5;
+
+    // Scale Settings
+    this.radialGauge.scaleStartAngle = 200;
+    this.radialGauge.scaleEndAngle = -20;
+    this.radialGauge.scaleBrush = "transparent";
+    this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
+
+    // Backing Settings
+    this.radialGauge.backingOutline = "white";
+    this.radialGauge.backingBrush = "white";
+
+    // Needle Settings
+    this.radialGauge.needleEndExtent = 0.8;
+    this.radialGauge.needleShape = RadialGaugeNeedleShape.Triangle;
+    this.radialGauge.needlePivotShape = RadialGaugePivotShape.Circle;
+    this.radialGauge.needlePivotWidthRatio = 0.1;
+    this.radialGauge.needleBrush = "#79797a";
+    this.radialGauge.needleOutline = "#79797a";
+
+    // TickMark Settings
+    this.radialGauge.tickBrush = "transparent";
+    this.radialGauge.minorTickBrush = "transparent";
+
+    // Label Settings
+    this.radialGauge.labelInterval = 10;
+    this.radialGauge.labelExtent = 1;
+    this.radialGauge.font = "15px Verdana,Arial";
+
+    // setting custom gauge ranges
+    const range1 = new IgxRadialGaugeRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 5;
+    const range2 = new IgxRadialGaugeRangeComponent();
+    range2.startValue = 5;
+    range2.endValue = 10;
+
+    this.radialGauge.rangeBrushes  = [ "#a4bd29", "#F86232" ];
+    this.radialGauge.rangeOutlines = [ "#a4bd29", "#F86232" ];
+    this.radialGauge.ranges.clear();
+    this.radialGauge.ranges.add(range1);
+    this.radialGauge.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.radialGauge.ranges.count; i++) {
+      const range = this.radialGauge.ranges.item(i);
+      range.innerStartExtent = 0.3;
+      range.innerEndExtent = 0.3;
+      range.outerStartExtent = 0.9;
+      range.outerEndExtent = 0.9;
+    }
+  }
+}
diff --git a/templates/angular/igx-ts/radial-gauge/default/index.ts b/templates/angular/igx-ts/radial-gauge/default/index.ts
new file mode 100644
index 000000000..bc34acd25
--- /dev/null
+++ b/templates/angular/igx-ts/radial-gauge/default/index.ts
@@ -0,0 +1,22 @@
+import { IgniteUIForAngularTemplate } from "../../../../../lib/templates/IgniteUIForAngularTemplate";
+
+class IgxRadialGaugeTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Radial Gauge"];
+		this.controlGroup = "Gauges";
+		this.listInComponentTemplates = true;
+		this.id = "radial-gauge";
+		this.projectType = "igx-ts";
+		this.name = "Radial Gauge";
+		this.description = "IgxRadialGauge with different animations";
+		this.dependencies = [
+			{
+				from: "igniteui-angular-gauges/ES5/igx-radial-gauge-module",
+				import: ["IgxRadialGaugeModule"]
+			}
+		];
+		this.packages = ["tslib@1.7.1", "igniteui-angular-core@6.1.1", "igniteui-angular-gauges@6.1.1"];
+	}
+}
+module.exports = new IgxRadialGaugeTemplate();
diff --git a/templates/angular/igx-ts/radial-gauge/index.ts b/templates/angular/igx-ts/radial-gauge/index.ts
new file mode 100644
index 000000000..429c919b8
--- /dev/null
+++ b/templates/angular/igx-ts/radial-gauge/index.ts
@@ -0,0 +1,14 @@
+
+import { BaseComponent } from "../../../../lib/BaseComponent";
+
+class IgxRadialGaugeComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Radial Gauge";
+		this.group = "Gauges";
+	}
+}
+module.exports = new IgxRadialGaugeComponent();