docs(): update angular usage

core/src/components.d.ts

@@ -164,6 +164,9 @@ declare global {
        * Title for the action sheet.
        */
       'header': string;
+      /**
+       * If the actionSheet should close the keyboard
+       */
       'keyboardClose': boolean;
       /**
        * Animation to use when the action sheet is dismissed.
@@ -177,6 +180,9 @@ declare global {
        * Returns a promise that resolves when the action-sheet will dismiss. It also accepts a callback that is called in the same circustances.  ``` const {data, role} = await actionSheet.onWillDismiss(); ```
        */
       'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
+      /**
+       * Unique ID to be used with the overlay. Internal only
+       */
       'overlayId': number;
       /**
        * Present the action sheet overlay after it has been created.
@@ -236,6 +242,9 @@ declare global {
        * Title for the action sheet.
        */
       'header'?: string;
+      /**
+       * If the actionSheet should close the keyboard
+       */
       'keyboardClose'?: boolean;
       /**
        * Animation to use when the action sheet is dismissed.
@@ -265,6 +274,9 @@ declare global {
        * Emitted before the alert has presented.
        */
       'onIonActionSheetWillPresent'?: (event: CustomEvent<void>) => void;
+      /**
+       * Unique ID to be used with the overlay. Internal only
+       */
       'overlayId'?: number;
       /**
        * Subtitle for the action sheet.

core/src/components/action-sheet/action-sheet.tsx

@@ -30,7 +30,15 @@ export class ActionSheet implements OverlayInterface {
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
   @Prop({ context: 'config' }) config!: Config;
+
+  /**
+   * Unique ID to be used with the overlay. Internal only
+   */
   @Prop() overlayId!: number;
+
+  /**
+   * If the actionSheet should close the keyboard
+   */
   @Prop() keyboardClose = true;
 
   /**

core/src/components/action-sheet/readme.md

@@ -56,6 +56,8 @@ Title for the action sheet.
 
 boolean
 
+If the actionSheet should close the keyboard
+
 
 #### leaveAnimation
 
@@ -68,6 +70,8 @@ Animation to use when the action sheet is dismissed.
 
 number
 
+Unique ID to be used with the overlay. Internal only
+
 
 #### subHeader
 
@@ -132,6 +136,8 @@ Title for the action sheet.
 
 boolean
 
+If the actionSheet should close the keyboard
+
 
 #### leave-animation
 
@@ -144,6 +150,8 @@ Animation to use when the action sheet is dismissed.
 
 number
 
+Unique ID to be used with the overlay. Internal only
+
 
 #### sub-header
 

core/src/components/action-sheet/usage/angular.md

@@ -11,8 +11,8 @@ export class ActionSheetExample {
 
   constructor(public actionSheetController: ActionSheetController) {}
 
-  presentActionSheet() {
+  async presentActionSheet() {
-    const actionSheet = this.actionSheetController.create({
+    const actionSheet = await this.actionSheetController.create({
       header: "Albums",
       buttons: [{
         text: 'Delete',
@@ -48,8 +48,7 @@ export class ActionSheetExample {
         }
       }]
     });
-
+    await actionSheet.present();
-    actionSheet.present();
   }
 
 }

core/src/components/alert/usage/angular.md

@@ -11,30 +11,30 @@ export class AlertExample {
 
   constructor(public alertController: AlertController) {}
 
-  presentAlert() {
+  async presentAlert() {
-    const alert = this.alertController.create({
+    const alert = await this.alertController.create({
       header: 'Alert',
       subHeader: 'Subtitle',
       message: 'This is an alert message.',
       buttons: ['OK']
     });
 
-    alert.present();
+    await alert.present();
   }
 
-  presentAlertMultipleButtons() {
+  async presentAlertMultipleButtons() {
-    const alert = this.alertController.create({
+    const alert = await this.alertController.create({
       header: 'Alert',
       subHeader: 'Subtitle',
       message: 'This is an alert message.',
       buttons: ['Cancel', 'Open Modal', 'Delete']
     });
 
-    alert.present();
+    await alert.present();
   }
 
-  presentAlertConfirm() {
+  async presentAlertConfirm() {
-    const alert = this.alertController.create({
+    const alert = await this.alertController.create({
       header: 'Confirm!',
       message: 'Message <strong>text</strong>!!!',
       buttons: [
@@ -54,11 +54,11 @@ export class AlertExample {
       ]
     });
 
-    alert.present();
+    await alert.present();
   }
 
-  presentAlertPrompt() {
+  async presentAlertPrompt() {
-    const alert = this.alertController.create({
+    const alert = await this.alertController.create({
       header: 'Prompt!',
       inputs: [
         {
@@ -116,11 +116,11 @@ export class AlertExample {
       ]
     });
 
-    alert.present();
+    await alert.present();
   }
 
-  presentAlertRadio() {
+  async presentAlertRadio() {
-    const alert = this.alertController.create({
+    const alert = await this.alertController.create({
       header: 'Radio',
       inputs: [
         {
@@ -172,11 +172,11 @@ export class AlertExample {
       ]
     });
 
-    alert.present();
+    await alert.present();
   }
 
-  presentAlertCheckbox() {
+  async presentAlertCheckbox() {
-    const alert = this.alertController.create({
+    const alert = await this.alertController.create({
       header: 'Checkbox',
       inputs: [
         {
@@ -233,7 +233,7 @@ export class AlertExample {
       ]
     });
 
-    alert.present();
+    await alert.present();
   }
 
 }

core/src/components/loading/usage/angular.md

@@ -5,30 +5,28 @@ import { LoadingController } from '@ionic/angular';
 @Component({
   selector: 'loading-example',
   templateUrl: 'loading-example.html',
-  styleUrls: ['./loading-example.css'],
+  styleUrls: ['./loading-example.css']
 })
 export class LoadingExample {
-
   constructor(public loadingController: LoadingController) {}
 
-  presentLoading() {
+  async presentLoading() {
-    const loading = this.loadingController.create({
+    const loading = await this.loadingController.create({
       message: 'Hellooo',
       duration: 2000
     });
-    loading.present();
+    return await loading.present();
   }
 
   presentLoadingWithOptions() {
-    const loading = this.loadingController.create({
+    const loading = await this.loadingController.create({
       spinner: 'hide',
       duration: 5000,
       content: 'Please wait...',
       translucent: true,
       cssClass: 'custom-class custom-loading'
     });
-    loading.present();
+    return await loading.present();
   }
-
 }
 ```

core/src/components/modal/readme.md

@@ -8,40 +8,6 @@ A Modal is a dialog that appears on top of the app's content, and must be dismis
 Modals can be created using a [Modal Controller](../../modal-controller/ModalController). They can be customized by passing modal options in the modal controller's create method.
 
 
-```javascript
-async function presentModal() {
-  // initialize controller
-  const modalController = document.querySelector('ion-modal-controller');
-  await modalController.componentOnReady();
-
-  // create component to open
-  const element = document.createElement('div');
-  element.innerHTML = `
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>Super Modal</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content>
-    <h1>Content of doom</h1>
-    <div>Here's some more content</div>
-    <ion-button class="dismiss">Dismiss Modal</ion-button>
-  </ion-content>
-  `;
-
-  // listen for close event
-  const button = element.querySelector('ion-button');
-  button.addEventListener('click', () => {
-    modalController.dismiss();
-  });
-
-  // present the modal
-  const modalElement = await modalController.create({
-    component: element
-  });
-  modalElement.present();
-}
-```
 
 <!-- Auto Generated Below -->
 

core/src/components/modal/usage/angular.md

@@ -0,0 +1,21 @@
+```typescript
+import { Component } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { ModalPage } from '../modal/modal.page';
+@Component({
+  selector: 'modal-example',
+  templateUrl: 'modal-example.html',
+  styleUrls: ['./modal-example.css']
+})
+export class ModalExample {
+  constructor(public modalController: ModalController) {}
+
+  async presentModal() {
+    const modal = await this.modalController.create({
+      component: ModalPage,
+      componentProps: { value: 123 }
+    });
+    return await modal.present();
+  }
+}
+```

core/src/components/modal/usage/javascript.md

@@ -0,0 +1,34 @@
+```javascript
+async function presentModal() {
+  // initialize controller
+  const modalController = document.querySelector('ion-modal-controller');
+  await modalController.componentOnReady();
+
+  // create component to open
+  const element = document.createElement('div');
+  element.innerHTML = `
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Super Modal</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <h1>Content of doom</h1>
+    <div>Here's some more content</div>
+    <ion-button class="dismiss">Dismiss Modal</ion-button>
+  </ion-content>
+  `;
+
+  // listen for close event
+  const button = element.querySelector('ion-button');
+  button.addEventListener('click', () => {
+    modalController.dismiss();
+  });
+
+  // present the modal
+  const modalElement = await modalController.create({
+    component: element
+  });
+  modalElement.present();
+}
+```

core/src/components/popover/usage/angular.md

@@ -1,24 +1,23 @@
 ```typescript
 import { Component } from '@angular/core';
 import { PopoverController } from '@ionic/angular';
+import { PopoverComponent } from '../../component/popover/popover.component';
 
 @Component({
   selector: 'popover-example',
   templateUrl: 'popover-example.html',
-  styleUrls: ['./popover-example.css'],
+  styleUrls: ['./popover-example.css']
 })
 export class PopoverExample {
-
   constructor(public popoverController: PopoverController) {}
 
-  presentPopover(ev: any) {
+  async presentPopover(ev: any) {
-    const popover = this.popoverController.create({
+    const popover = await this.popoverController.create({
-      component: 'popover-example-page',
+      component: PopoverComponent,
       ev: event,
       translucent: true
     });
-    popover.present();
+    return await popover.present();
   }
-
 }
 ```