diff --git a/packages/demos/angular/src/app/app-routing.module.ts b/packages/demos/angular/src/app/app-routing.module.ts
index 6f8d5b8879..654d9c8739 100644
--- a/packages/demos/angular/src/app/app-routing.module.ts
+++ b/packages/demos/angular/src/app/app-routing.module.ts
@@ -8,6 +8,7 @@ const routes: Routes = [
   { path: 'home', loadChildren: 'app/home-page/home-page.module#HomePageModule' },
   { path: 'alert', loadChildren: 'app/alert/alert.module#AlertModule' },
   { path: 'actionSheet', loadChildren: 'app/action-sheet/action-sheet.module#ActionSheetModule' },
+  { path: 'badge', loadChildren: 'app/badge/badge.module#BadgeModule' },
   { path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
   { path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
   { path: 'nav', loadChildren: 'app/nav/nav.module#NavModule' },
diff --git a/packages/demos/angular/src/app/badge/badge-page.component.ts b/packages/demos/angular/src/app/badge/badge-page.component.ts
new file mode 100644
index 0000000000..9dfda92d81
--- /dev/null
+++ b/packages/demos/angular/src/app/badge/badge-page.component.ts
@@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-badge-page',
+  template: `
+  <ion-app>
+  <ion-page class="show-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Badges</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-list-header>Badges Right</ion-list-header>
+        <ion-item>
+          <ion-badge slot="end" color="primary">99</ion-badge>
+          <ion-label>Default Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="primary">99</ion-badge>
+          <ion-label>Primary Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="secondary">99</ion-badge>
+          <ion-label>Secondary Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="danger">99</ion-badge>
+          <ion-label>Danger Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="light">99</ion-badge>
+          <ion-label>Light Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="dark">99</ion-badge>
+          <ion-label>Dark Badge</ion-label>
+        </ion-item>
+        <ion-item (click)="toggleColor()">
+          <ion-badge slot="end" [color]="dynamicColor">{{dynamicColor}}</ion-badge>
+          <ion-label>Dynamic Badge Color (toggle)</ion-label>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>Badges Left</ion-list-header>
+        <ion-item>
+          <ion-badge slot="start" color="primary">99</ion-badge>
+          <ion-label>Default Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="primary">99</ion-badge>
+          <ion-label>Primary Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="secondary">99</ion-badge>
+          <ion-label>Secondary Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="danger">99</ion-badge>
+          <ion-label>Danger Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="light">99</ion-badge>
+          <ion-label>Light Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="dark">99</ion-badge>
+          <ion-label>Dark Badge</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</ion-app>
+  `
+})
+export class BadgePageComponent {
+  dynamicColor = 'primary';
+
+  constructor() {
+
+  }
+
+  toggleColor() {
+    if (this.dynamicColor === 'primary') {
+      this.dynamicColor = 'secondary';
+    } else if (this.dynamicColor === 'secondary') {
+      this.dynamicColor = 'danger';
+    } else {
+      this.dynamicColor = 'primary';
+    }
+  }
+}
diff --git a/packages/demos/angular/src/app/badge/badge-routing.module.ts b/packages/demos/angular/src/app/badge/badge-routing.module.ts
new file mode 100644
index 0000000000..5e0bb35170
--- /dev/null
+++ b/packages/demos/angular/src/app/badge/badge-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BadgePageComponent } from './badge-page.component';
+
+const routes: Routes = [
+  { path: '', component: BadgePageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BadgeRoutingModule { }
diff --git a/packages/demos/angular/src/app/badge/badge.module.ts b/packages/demos/angular/src/app/badge/badge.module.ts
new file mode 100644
index 0000000000..5843275a9e
--- /dev/null
+++ b/packages/demos/angular/src/app/badge/badge.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BadgePageComponent } from './badge-page.component';
+import { BadgeRoutingModule } from './badge-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BadgeRoutingModule
+  ],
+  declarations: [BadgePageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class BadgeModule { }
diff --git a/packages/demos/angular/src/app/home-page/home-page.component.html b/packages/demos/angular/src/app/home-page/home-page.component.html
index fd114e4099..189556e0c4 100644
--- a/packages/demos/angular/src/app/home-page/home-page.component.html
+++ b/packages/demos/angular/src/app/home-page/home-page.component.html
@@ -12,6 +12,9 @@
   <li>
     <a href='alert'>Alert Page</a>
   </li>
+  <li>
+    <a href='badge'>Badge Page</a>
+  </li>
   <li>
     <a href='actionSheet'>Action Sheet Page</a>
   </li>