diff --git a/templates/angular/igx-ts/tabbar/default/files/src/app/__path__/__name__.component.html b/templates/angular/igx-ts/tabbar/default/files/src/app/__path__/__name__.component.html
index d0ae2fb78..8514cc7a4 100644
--- a/templates/angular/igx-ts/tabbar/default/files/src/app/__path__/__name__.component.html
+++ b/templates/angular/igx-ts/tabbar/default/files/src/app/__path__/__name__.component.html
@@ -1,6 +1,6 @@
 <div>
-  <p>igx-tab-bar component. You can read more about configuring the igx-tab-bar component <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/src/tabbar/README.md" target="_blank">here</a>.</p>
-  <igx-tab-bar>
+  <p>igx-bottom-nav component. You can read more about configuring the igx-bottom-nav component <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/src/tabbar/README.md" target="_blank">here</a>.</p>
+  <igx-bottom-nav>
   <igx-tab-panel icon="phone">
     <h3 class="header">History</h3>
     <div class="item" igxRipple="pink" *ngFor="let contact of userContacts">
@@ -36,5 +36,5 @@ <h3>Tab 3 Content</h3>
         Mauris vel quam at velit venenatis vulputate in quis nisl.</p>
     </div>
   </igx-tab-panel>
-</igx-tab-bar>
+</igx-bottom-nav>
 </div>
diff --git a/templates/angular/igx-ts/tabbar/default/index.ts b/templates/angular/igx-ts/tabbar/default/index.ts
index c67caceae..88b6604c8 100644
--- a/templates/angular/igx-ts/tabbar/default/index.ts
+++ b/templates/angular/igx-ts/tabbar/default/index.ts
@@ -1,19 +1,19 @@
 import { IgniteUIForAngularTemplate } from "../../../../../lib/templates/IgniteUIForAngularTemplate";
 
-class IgxTabbarTemplate extends IgniteUIForAngularTemplate {
+class IgxBottomNavTemplate extends IgniteUIForAngularTemplate {
 	constructor() {
 		super(__dirname);
-		this.components = ["Tabbar"];
+		this.components = ["Bottom Navigation"];
 		this.controlGroup = "Layouts";
 		this.listInComponentTemplates = true;
-		this.id = "tabbar";
+		this.id = "bottom-nav";
 		this.projectType = "igx-ts";
-		this.name = "Tabbar";
-		this.description = "Three item tabbar template";
+		this.name = "Bottom Navigation";
+		this.description = "Three item bottom navigation template";
 		this.dependencies = [{
 			from: "igniteui-angular/main",
-			import: ["IgxTabBarModule", "IgxAvatarModule", "IgxIconModule", "IgxRippleModule"]
+			import: ["IgxBottomNavModule", "IgxAvatarModule", "IgxIconModule", "IgxRippleModule"]
 		}];
 	}
 }
-module.exports = new IgxTabbarTemplate();
+module.exports = new IgxBottomNavTemplate();
diff --git a/templates/angular/igx-ts/tabbar/index.ts b/templates/angular/igx-ts/tabbar/index.ts
index 354da6086..c09570717 100644
--- a/templates/angular/igx-ts/tabbar/index.ts
+++ b/templates/angular/igx-ts/tabbar/index.ts
@@ -1,14 +1,14 @@
 
 import { BaseComponent } from "../../../../lib/BaseComponent";
 
-class IgxTabbarComponent extends BaseComponent {
+class IgxBottomNavComponent extends BaseComponent {
 	/**
 	 *
 	 */
 	constructor() {
 		super(__dirname);
-		this.name  = "Tabbar";
+		this.name  = "Bottom Navigation";
 		this.group = "Layouts";
 	}
 }
-module.exports = new IgxTabbarComponent();
+module.exports = new IgxBottomNavComponent();