diff --git a/angular/BREAKING.md b/angular/BREAKING.md
index cf2cee9fc1..4e0373998b 100644
--- a/angular/BREAKING.md
+++ b/angular/BREAKING.md
@@ -1444,14 +1444,7 @@ The `ios` and `ios-small` spinner's have been renamed to `lines` and `lines-smal
 
 #### `ion-tabs`
 
-The attributes to position the tabs, change the tab layout, enable the tab highlight and hide the tabs have been renamed.
-
-| Old Property        | New Property         | Notes                                           |
-|---------------------|----------------------|-------------------------------------------------|
-| `tabsHighlight`     | `tabbarHighlight`    |                                                 |
-| `tabsLayout`        | `tabbarLayout`       | Value `title-hide` was renamed to `label-hide`  |
-| `tabsPlacement`     | `tabbarPlacement`    |                                                 |
-| `hidden`            | `tabbarHidden`       |                                                 |
+The attributes to position the tabs, change the tab layout, enable the tab highlight and hide the tabs have been removed
 
 **Old Usage Example:**
 
@@ -1464,7 +1457,7 @@ The attributes to position the tabs, change the tab layout, enable the tab highl
 **New Usage Example:**
 
 ```html
-<ion-tabs tabbarLayout="icon-top" tabbarPlacement="bottom" tabbarHighlight="true" tabbarHidden>
+<ion-tabs>
   ...
 </ion-tabs>
 ```
@@ -1472,16 +1465,7 @@ The attributes to position the tabs, change the tab layout, enable the tab highl
 
 #### `ion-tab`
 
-The attributes for the tab title, icon, and badge customization have been renamed.
-
-| Old Property        | New Property         |
-|---------------------|----------------------|
-| `tabTitle`          | `label`              |
-| `tabIcon`           | `icon`               |
-| `tabBadge`          | `badge`              |
-| `tabBadgeStyle`     | `badgeColor`         |
-| `enabled`           | `disabled`           |
-| `tabUrlPath`        | `href`               |
+The attributes for the tab title, icon, and badge customization have been removed. Instead you can add `<ion-label>` and `<ion-icon>` inside. `ion-tab` is to be wrapped by a `<ion-tab-bar>`.
 
 **Old Usage Example:**
 
@@ -1496,8 +1480,13 @@ The attributes for the tab title, icon, and badge customization have been rename
 
 ```html
 <ion-tabs>
-  <ion-tab label="Schedule" icon="add"></ion-tab>
-  <ion-tab label="Map" icon="map" badge="2" badgeColor="danger" disabled="true"></ion-tab>
+  <ion-tab-bar>
+    <ion-tab-button tab="map" disabled="true">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+      <ion-badge color="danger">2</ion-badge>
+    </ion-tab-button>
+  </ion-tab-bar>
 </ion-tabs>
 ```
 
diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md
index 0f9bd9412c..35ce13a6de 100644
--- a/core/src/components/tab-bar/readme.md
+++ b/core/src/components/tab-bar/readme.md
@@ -8,7 +8,27 @@ The tab bar is a UI component that contains a set of [tab buttons](../tab-button
 
 ## Usage
 
-### Angular / javascript
+### Angular
+
+```html
+<ion-tabs>
+  <!-- Tab bar -->
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="account">
+      <ion-icon name="person"></ion-icon>
+    </ion-tab-button>
+    <ion-tab-button tab="contact">
+      <ion-icon name="call"></ion-icon>
+    </ion-tab-button>
+    <ion-tab-button tab="settings">
+      <ion-icon name="settings"></ion-icon>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```
+
+
+### Javascript
 
 ```html
 <ion-tabs>
diff --git a/core/src/components/tab-bar/usage/angular.md b/core/src/components/tab-bar/usage/angular.md
index d6b3dab547..a9731b050f 100644
--- a/core/src/components/tab-bar/usage/angular.md
+++ b/core/src/components/tab-bar/usage/angular.md
@@ -1,10 +1,5 @@
 ```html
 <ion-tabs>
-  <!-- Tab views -->
-  <ion-tab tab="account"></ion-tab>
-  <ion-tab tab="contact"></ion-tab>
-  <ion-tab tab="settings"></ion-tab>
-
   <!-- Tab bar -->
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="account">
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index c9988bf7dc..0e3775aa87 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -10,6 +10,37 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
 
 ## Usage
 
+### Angular
+
+```html
+<ion-tabs>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="schedule">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="speakers">
+      <ion-icon name="contacts"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="about">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+
+</ion-tabs>
+```
+
+
 ### Javascript
 
 ```html
diff --git a/core/src/components/tab-button/usage/angular.md b/core/src/components/tab-button/usage/angular.md
new file mode 100644
index 0000000000..4fc4021d88
--- /dev/null
+++ b/core/src/components/tab-button/usage/angular.md
@@ -0,0 +1,27 @@
+```html
+<ion-tabs>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="schedule">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="speakers">
+      <ion-icon name="contacts"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="about">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+
+</ion-tabs>
+```
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index de0eecdb1b..ebca502a07 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -66,21 +66,17 @@ Would match the following tab:
 
 ### Angular Router integration
 
-Using tabs with Angular's router is fairly straight forward. The only additional requirement is that an href is supplied to update the browser URL. In this way, the correct `ion-tab` is selected, and the URl is updated.
+Using tabs with Angular's router is fairly straight forward. Here you only need to define tab which is the reference to the route.
 
 ```html
 
 <ion-tabs>
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+    <ion-tab-button tab="schedule">
       <ion-icon name="calendar"></ion-icon>
       <ion-label>Schedule</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
-  <ion-tab tab="schedule">
-    <ion-router-outlet name="schedule"></ion-router-outlet>
-  </ion-tab>
 </ion-tabs>
 ```
 
@@ -93,46 +89,28 @@ Using tabs with Angular's router is fairly straight forward. The only additional
 
 ```html
 <ion-tabs>
-
-  <ion-tab tab="schedule">
-    <ion-router-outlet name="schedule"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="speakers">
-    <ion-router-outlet name="speakers"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="map">
-    <ion-router-outlet name="map"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="about">
-    <ion-router-outlet name="about"></ion-router-outlet>
-  </ion-tab>
-
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+    <ion-tab-button tab="schedule">
       <ion-icon name="calendar"></ion-icon>
       <ion-label>Schedule</ion-label>
       <ion-badge>6</ion-badge>
     </ion-tab-button>
 
-    <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
+    <ion-tab-button tab="speakers">
       <ion-icon name="contacts"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+    <ion-tab-button tab="map">
       <ion-icon name="map"></ion-icon>
       <ion-label>Map</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="about" href="/app/tabs/(about:about)">
+    <ion-tab-button tab="about">
       <ion-icon name="information-circle"></ion-icon>
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
 </ion-tabs>
 ```
 
diff --git a/core/src/components/tabs/usage/angular.md b/core/src/components/tabs/usage/angular.md
index e3f92d8c6f..452d52aa8e 100644
--- a/core/src/components/tabs/usage/angular.md
+++ b/core/src/components/tabs/usage/angular.md
@@ -1,44 +1,26 @@
 ```html
 <ion-tabs>
-
-  <ion-tab tab="schedule">
-    <ion-router-outlet name="schedule"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="speakers">
-    <ion-router-outlet name="speakers"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="map">
-    <ion-router-outlet name="map"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="about">
-    <ion-router-outlet name="about"></ion-router-outlet>
-  </ion-tab>
-
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+    <ion-tab-button tab="schedule">
       <ion-icon name="calendar"></ion-icon>
       <ion-label>Schedule</ion-label>
       <ion-badge>6</ion-badge>
     </ion-tab-button>
 
-    <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
+    <ion-tab-button tab="speakers">
       <ion-icon name="contacts"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+    <ion-tab-button tab="map">
       <ion-icon name="map"></ion-icon>
       <ion-label>Map</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="about" href="/app/tabs/(about:about)">
+    <ion-tab-button tab="about">
       <ion-icon name="information-circle"></ion-icon>
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
 </ion-tabs>
 ```