feature(angular): action-sheet, alert, loading, toast

packages/demos/angular/src/app/action-sheet/action-sheet-page.component.ts

@@ -0,0 +1,68 @@
+import { Component } from '@angular/core';
+
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-action-sheet-page',
+  template: `
+  <ion-app>
+  <ion-page class="show-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      <ion-button (click)="clickMe()">Open Basic ActionSheet</ion-button>
+    </ion-content>
+  </ion-page>
+</ion-app>
+  `
+})
+export class ActionSheetPageComponent {
+
+  constructor(private actionSheetController: ActionSheetController) {
+
+  }
+
+  clickMe() {
+    const actionSheet = this.actionSheetController.create({
+      title: 'Albums',
+      buttons: [{
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Share',
+        icon: 'share',
+        handler: () => {
+          console.log('Share clicked');
+        }
+      }, {
+        text: 'Play (open modal)',
+        icon: 'arrow-dropright-circle',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, {
+        text: 'Favorite',
+        icon: 'heart',
+        handler: () => {
+          console.log('Favorite clicked');
+        }
+      }, {
+        text: 'Cancel',
+        role: 'cancel',
+        icon: 'close',
+        handler: () => {
+          console.log('Cancel clicked');
+        }
+      }]
+    });
+    actionSheet.present();
+  }
+
+}

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

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

packages/demos/angular/src/app/action-sheet/action-sheet.module.ts

@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ActionSheetPageComponent } from './action-sheet-page.component';
+import { ActionSheetRoutingModule } from './action-sheet-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ActionSheetRoutingModule
+  ],
+  declarations: [ActionSheetPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ActionSheetModule { }

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

@@ -6,7 +6,10 @@ const routes: Routes = [
   { path: 'basic-inputs', loadChildren: 'app/basic-inputs-page/basic-inputs-page.module#BasicInputsPageModule' },
   { path: 'group-inputs', loadChildren: 'app/group-inputs-page/group-inputs-page.module#GroupInputsPageModule' },
   { path: 'home', loadChildren: 'app/home-page/home-page.module#HomePageModule' },
-  { path: 'alert', loadChildren: 'app/alert/alert.module#AlertModule' }
+  { path: 'alert', loadChildren: 'app/alert/alert.module#AlertModule' },
+  { path: 'actionSheet', loadChildren: 'app/action-sheet/action-sheet.module#ActionSheetModule' },
+  { path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
+  { path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' }
 ];
 
 @NgModule({

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

@@ -6,7 +6,6 @@ import { AppRoutingModule } from './app-routing.module';
 
 import { IonicAngularModule } from '@ionic/angular';
 
-
 @NgModule({
   declarations: [AppComponent],
   imports: [

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

@@ -12,4 +12,13 @@
   <li>
     <a href='alert'>Alert Page</a>
   </li>
+  <li>
+    <a href='actionSheet'>Action Sheet Page</a>
+  </li>
+  <li>
+    <a href='toast'>Toast Page</a>
+  </li>
+  <li>
+    <a href='loading'>Loading Page</a>
+  </li>
 </ul>

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

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-loading-page',
+  template: `
+  <ion-app>
+  <ion-page class="show-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      <ion-button (click)="clickMe()">Open Basic Loading</ion-button>
+    </ion-content>
+  </ion-page>
+</ion-app>
+  `
+})
+export class LoadingPageComponent {
+
+  constructor(private loadingController: LoadingController) {
+
+  }
+
+  clickMe() {
+    const loading = this.loadingController.create({
+      duration: 2000,
+      content: 'Ahem. Please wait.'
+    });
+    loading.present();
+  }
+
+}

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-toast-page',
+  template: `
+  <ion-app>
+  <ion-page class="show-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      <ion-button (click)="clickMe()">Open Basic Toast</ion-button>
+    </ion-content>
+  </ion-page>
+</ion-app>
+  `
+})
+export class ToastPageComponent {
+
+  constructor(private toastController: ToastController) {
+
+  }
+
+  clickMe() {
+    const toast = this.toastController.create({
+      closeButtonText: 'close dat toast',
+      duration: 1000,
+      message: 'Howdy ho toasty neighbor',
+      position: 'bottom'
+    });
+    toast.present();
+  }
+
+}

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

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

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

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