modal/controller

Author: amandaesmith3

static/usage/v7/modal/controller/angular/example_component_html.md

@@ -6,6 +6,5 @@
 </ion-header>
 <ion-content class="ion-padding">
   <ion-button expand="block" (click)="openModal()">Open</ion-button>
-  <p>{{ message }}</p>
 </ion-content>
 ```

static/usage/v7/modal/controller/angular/example_component_ts.md

@@ -9,8 +9,6 @@ import { ModalExampleComponent } from './modal-example.component';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  message = 'This modal example uses the modalController to present and dismiss modals.';
-
   constructor(private modalCtrl: ModalController) {}
 
   async openModal() {
@@ -22,7 +20,7 @@ export class ExampleComponent {
     const { data, role } = await modal.onWillDismiss();
 
     if (role === 'confirm') {
-      this.message = `Hello, ${data}!`;
+      console.log(`Hello, ${data}!`);
     }
   }
 }

static/usage/v7/modal/controller/demo.html

@@ -23,31 +23,30 @@
       </ion-header>
       <ion-content class="ion-padding">
         <ion-button expand="block" onclick="openModal()">Open</ion-button>
-        <p id="message">This modal example uses the modalController to present and dismiss modals.</p>
       </ion-content>
     </ion-app>
 
     <script>
       const openModal = async () => {
         const div = document.createElement('div');
         div.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button color="medium" onclick="cancel()">Cancel</ion-button>
-          </ion-buttons>
-          <ion-title>Welcome</ion-title>
-          <ion-buttons slot="end">
-            <ion-button onclick="confirm()" strong>Confirm</ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <ion-item>
-          <ion-input type="text" label="Enter your name" label-placement="stacked" placeholder="Your name"></ion-input>
-        </ion-item>
-      </ion-content>
-      `;
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-button color="medium" onclick="cancel()">Cancel</ion-button>
+              </ion-buttons>
+              <ion-title>Welcome</ion-title>
+              <ion-buttons slot="end">
+                <ion-button onclick="confirm()" strong>Confirm</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <ion-item>
+              <ion-input type="text" label="Enter your name" label-placement="stacked" placeholder="Your name"></ion-input>
+            </ion-item>
+          </ion-content>
+        `;
 
         const modal = await modalController.create({
           component: div,
@@ -58,7 +57,7 @@
         const { data, role } = await modal.onWillDismiss();
 
         if (role === 'confirm') {
-          document.querySelector('#message').innerHTML = `Hello, ${data}!`;
+          console.log(`Hello, ${data}!`);
         }
       };
 

static/usage/v7/modal/controller/index.md

@@ -36,4 +36,5 @@ import angular_modal_example_component_html from './angular/modal-example_compon
   src="usage/v7/modal/controller/demo.html"
   devicePreview
   includeIonContent={false}
+  showConsole={true}
 />

static/usage/v7/modal/controller/javascript.md

@@ -6,7 +6,6 @@
 </ion-header>
 <ion-content class="ion-padding">
   <ion-button expand="block" onclick="openModal()">Open</ion-button>
-  <p id="message">This modal example uses the modalController to present and dismiss modals.</p>
 </ion-content>
 
 <script>
@@ -29,7 +28,7 @@
           <ion-input type="text" label-placement="stacked" label="Enter your name" placeholder="Your name"></ion-input>
         </ion-item>
       </ion-content>
-      `;
+    `;
 
     const modal = await modalController.create({
       component: div,
@@ -40,7 +39,7 @@
     const { data, role } = await modal.onWillDismiss();
 
     if (role === 'confirm') {
-      document.querySelector('#message').innerHTML = `Hello, ${data}!`;
+      console.log(`Hello, ${data}!`);
     }
   };
 

static/usage/v7/modal/controller/react.md

@@ -1,5 +1,5 @@
 ```tsx
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import {
   IonButtons,
   IonButton,
@@ -50,13 +50,12 @@ function Example() {
   const [present, dismiss] = useIonModal(ModalExample, {
     onDismiss: (data: string, role: string) => dismiss(data, role),
   });
-  const [message, setMessage] = useState('This modal example uses the modalController to present and dismiss modals.');
 
   function openModal() {
     present({
       onWillDismiss: (ev: CustomEvent<OverlayEventDetail>) => {
         if (ev.detail.role === 'confirm') {
-          setMessage(`Hello, ${ev.detail.data}!`);
+          console.log(`Hello, ${ev.detail.data}!`);
         }
       },
     });
@@ -73,7 +72,6 @@ function Example() {
         <IonButton expand="block" onClick={() => openModal()}>
           Open
         </IonButton>
-        <p>{message}</p>
       </IonContent>
     </IonPage>
   );

static/usage/v7/modal/controller/vue/example_vue.md

@@ -8,17 +8,13 @@
     </ion-header>
     <ion-content class="ion-padding">
       <ion-button expand="block" @click="openModal">Open Modal</ion-button>
-      <p>{{ message }}</p>
     </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts" setup>
   import { IonButton, IonContent, IonPage, IonHeader, IonToolbar, IonTitle, modalController } from '@ionic/vue';
   import Modal from './Modal.vue';
-  import { ref } from 'vue';
-
-  const message = ref('This modal example uses the modalController to present and dismiss modals.');
 
   const openModal = async () => {
     const modal = await modalController.create({
@@ -30,7 +26,7 @@
     const { data, role } = await modal.onWillDismiss();
 
     if (role === 'confirm') {
-      message.value = `Hello, ${data}!`;
+      console.log(`Hello, ${data}!`);
     }
   };
 </script>