diff --git a/README.md b/README.md
index e9321be57f..9b4f8ebca1 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,16 @@ Ionic 2 is based on the new [2.x version of AngularJS](https://angular.io/), and
3. Go to [http://localhost:8000/e2e/](http://localhost:8000/e2e/)
4. Stay cool
+### Building & Running Component Demos
+
+1. Clone the `ionic-site` repo in `ionic2/dist/`: `git clone git@github.com:driftyco/ionic-site.git`
+ * You may need to remove the existing directory first: `rm -rf ionic2/dist/ionic-site`
+2. Run `gulp demos:all` from the top level directory
+3. Navigate to `ionic2/dist/ionic-site` and run `npm install`
+4. Run `gulp watch` in this directory
+5. A browser should launch at `http://localhost:3000` at which point you can navigate to `http://localhost:3000/docs/v2/components/`
+6. Any time you make a change to the demos repeat step 2
+
### Running Snapshot
1. Install [Protractor](https://angular.github.io/protractor/#/): `npm install -g protractor`
diff --git a/demos/component-docs/popups/popups.html b/demos/component-docs/popups/popups.html
index 3babd71e5f..2cd9aac0c8 100644
--- a/demos/component-docs/popups/popups.html
+++ b/demos/component-docs/popups/popups.html
@@ -4,7 +4,9 @@
+
+
diff --git a/demos/component-docs/popups/popups.ts b/demos/component-docs/popups/popups.ts
index 8744fbb3c0..4b0fedf13b 100644
--- a/demos/component-docs/popups/popups.ts
+++ b/demos/component-docs/popups/popups.ts
@@ -9,8 +9,30 @@ export class PopupsPage {
this.popup = popup;
}
- showPopup() {
- this.popup.alert("Popup Title").then(() => {
+ doAlert() {
+ this.popup.alert({
+ title: "New Friend!",
+ template: "Your friend, Obi wan Kenobi, just accepted your friend request!",
+ cssClass: 'my-alert'
});
}
-}
\ No newline at end of file
+
+ doPrompt() {
+ this.popup.prompt({
+ title: "New Album",
+ template: "Enter a name for this new album you're so keen on adding",
+ inputPlaceholder: "Title",
+ okText: "Save"
+ });
+ }
+
+ doConfirm() {
+ this.popup.confirm({
+ title: "Use this lightsaber?",
+ subTitle: "You can't exchange lightsabers",
+ template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
+ cancelText: "Disagree",
+ okText: "Agree"
+ });
+ }
+}