chore(): add demos and docs

packages/demos/angular/src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ const routes: Routes = [
   { path: 'actionSheet', loadChildren: 'app/action-sheet/action-sheet.module#ActionSheetModule' },
   { path: 'badge', loadChildren: 'app/badge/badge.module#BadgeModule' },
   { path: 'card', loadChildren: 'app/card/card.module#CardModule' },
+  { path: 'content', loadChildren: 'app/content/content.module#ContentModule' },
   { path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
   { path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
   { path: 'nav', loadChildren: 'app/nav/nav.module#NavModule' },

packages/demos/angular/src/app/content/content-page.component.ts

@@ -0,0 +1,72 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card-page',
+  styles: [
+    `
+      div.box {
+        display: block;
+        margin: 15px auto;
+        max-width: 150px;
+        height: 150px;
+        background: blue;
+      }
+
+      div.box:last-of-type {
+        background: yellow;
+      }
+    `
+  ],
+  template: `
+  <ion-app>
+  <ion-page class="show-page">
+  <ion-header #header>
+    <ion-toolbar style="display: none" #toolbar>
+      <ion-title>Hidden Toolbar</ion-title>
+    </ion-toolbar>
+    <ion-toolbar>
+      <ion-title>Content - Basic</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+    <ion-content padding style="text-align: center" #content>
+      <p>
+      <ion-button (click)="toggleFullscreen(content)">Toggle content.fullscreen</ion-button>
+      <p>
+        <ion-button (click)="toggleDisplay(header)" color="secondary">Toggle header</ion-button>
+        <ion-button (click)="toggleDisplay(footer)" color="secondary">Toggle footer</ion-button>
+        <ion-button (click)="toggleDisplay(toolbar)" color="secondary">Toggle 2nd toolbar</ion-button>
+      </p>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+    </ion-content>
+
+
+  <ion-footer #footer>
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</ion-page>
+</ion-app>
+  `
+})
+export class ContentPageComponent {
+  constructor() {}
+
+  toggleFullscreen(content) {
+    content.fullscreen = !content.fullscreen;
+    console.log('content.fullscren =', content.fullscreen);
+  }
+
+  toggleDisplay(el) {
+    el.style.display = !el.style.display ? 'none' : null;
+  }
+}

packages/demos/angular/src/app/content/content-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ContentPageComponent } from './content-page.component';
+
+const routes: Routes = [
+  { path: '', component: ContentPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ContentRoutingModule { }

packages/demos/angular/src/app/content/content.module.ts

@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ContentPageComponent } from './content-page.component';
+import { ContentRoutingModule } from './content-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ContentRoutingModule
+  ],
+  declarations: [ContentPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ContentModule { }

packages/demos/angular/src/app/home-page/home-page.component.html

@@ -18,6 +18,9 @@
   <li>
     <a href='card'>Card Page</a>
   </li>
+  <li>
+    <a href='content'>Content Page</a>
+  </li>
   <li>
     <a href='actionSheet'>Action Sheet Page</a>
   </li>