New user of Ionic 5 Angular 9 need help with code splitting

Ionic Framework Ionic Angular
1

Hi :alien:

This is my first post on the Ionic forum. I try to create a mobile app for my website in Ionic 5 angular 9. I have created a new page in my ionic app. So I got a new folder with those files

  • MYSITE-routing.module.ts
  • MYSITE.module.ts
  • MYSITE.page.html
  • MYSITE.page.scss
  • MYSITE.page.spec.ts
  • MYSITE.page.ts

I would like to add fallowing script into my Ionic app:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Picker</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"></script>
  <style>
    :root {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 22px;
    }
  </style>
</head>
  <ion-app>
 <ion-content fullscreen class="ion-padding">
      <ion-picker-controller></ion-picker-controller>
      <ion-button onclick="openPicker()">MY_BUTTON_TO_CLICK</ion-button>    
 </ion-content>
  </ion-app>

<script>
    const pickerController = document.querySelector('ion-picker-controller');
    const MY_BUTTON_TO_CLICK = [
      [
        'OPTION_1',
        'OPTION_2',
        'OPTION_3',
        'OPTION_4',
        'OPTION_5',
      ]
    ]

 async function openPicker(numColumns = 1, numOptions = 5, columnOptions = MY_BUTTON_TO_CLICK){
      const picker = await pickerController.create({
        columns: this.getColumns(numColumns, numOptions, columnOptions),
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel'
          },
          {
            text: 'Confirm',
            handler: (value) => {
              console.log(`Got Value ${value}`);
            }
          }
        ]
      });

      await picker.present();
    }

   function getColumns(numColumns, numOptions, columnOptions) {
      let columns = [];
      for (let i = 0; i < numColumns; i++) {
        columns.push({
          name: `col-${i}`,
          options: this.getColumnOptions(i, numOptions, columnOptions)
        });
      }

      return columns;
    }

    function getColumnOptions(columnIndex, numOptions, columnOptions) {
      let options = [];
      for (let i = 0; i < numOptions; i++) {
        options.push({
          text: columnOptions[columnIndex][i % numOptions],
          value: i
        })
      }

      return options;
    }
  </script>
 </ion-app>
</body>
</html>

let’s say that is easy but I m a new user of Ionic 5 Angular 9 so for that reason I need Your advice. When I copy and past into MYSITE.page.html the script doesn’t work. I think that i need to slice this file into 2 or 3 smaller files.

I think to past this code into MYSITE.page.html

  <ion-app>
 <ion-content fullscreen class="ion-padding">
      <ion-picker-controller></ion-picker-controller>
      <ion-button onclick="openPicker()">MY_BUTTON_TO_CLICK</ion-button>    
 </ion-content>
  </ion-app>

and the rest of it, I mean <script> ...</script> i have to copy and past into … I dont know where ?

  • MYSITE.page.ts
  • MYSITE.page.spec.ts
  • MYSITE.module.ts

Can anybody help me with this junior-level inquiries?