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?