@hobby-turysta wrote:
Hi
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?
Posts: 1
Participants: 1