I have been looking for an example of how to use ion-select but I can’t find any! most of what I find are just html side of it. Can someone please post an example showing .ts side and also .html if its not that much of work. i am looking for an example of multiple checkbox
Have you looked at the official docs? There a Demo Source link for each example.
this is what you can do:
//your dynamic options, you can hardcode them in your select 'inputs' field
let options = [1, 2, 3, 4, 5, 6, 7];
//your select options
let select = {
title: 'My Select',
subtitle: 'select via .ts',
inputs: [],
buttons: [{ title: 'ok', handler: data => { 'do someting...' } }]
}
//will populate your inputs
for (var i = 0; i < options.length; i++) {
select.inputs.push({name: 'myInput', type: 'radio', value: options[i]});
}
//create a newAlert that receives the alert method with your select options
let newAlert = this.alerts.create(select);
//present your select
newAlert.present();
this is a simple way to create an select via your .ts file 
Gabriel my friend , can you write the html side as well , to make things clear for me
i get so much stuck on how to reference [{ngModel}]
my options going to be subscribed from a service … thanx for clarifying on how to populate the inputs.
also, can I check my options whether they are already selected !! (whether some options already selected or registered ) so it handles a response or error that this item is already selected
Your html can be just a (click)="" that calls the function that your select is beeing generated, so you can set it to buttons, inputs, divs or whatever you need. Then you can set it to the value of your variable like this.myNgModel = _The data from your select_;.
I dont’ know the easiest way to check if they’re already selected, so you have 2 options:
- You can set your select with
multiple: true,so it’ll accept multiple options at once, this way the user can select more than one and there’s no need for them to open again (this depends on what is the purpose of the select); - You can just compare the selected data with the saved data the user has already selected. You can do this on your ‘ok’ button in the select, like:
[handler: data => { if(this.MyNgModel == data) {'Create a toast/alert/anything to inform they already selected this'} }
hope this helps 
Mr.Gabriel ,
i wrote your .ts sample and it works somehow ok… since this works somehow , I decided not add anything to the html side, cuz i get lost in that part.
However , the type radio button is showing ok but the values [1,2…7] does not show , only the radio buttons does , and I actually want it to be a checkbox , I replaced ‘radio’ with ‘checkboxes’ now [1,2…7] is showing but no checkboxes
Also , where do I add mutiple ‘true’ ??
this is what Im doing :
openMenu(param) {
let actionSheet = this.actionsheetCtrl.create({
title: 'Modify ' + param.name,
cssClass: 'action-sheets',
buttons: [
{
text: 'Add course',
icon: !this.platform.is('ios') ? 'add-circle': null,
handler: () => {
this.addSelectCourse();
}
}
addSelectCourse(){
let options = [1, 2, 3, 4, 5, 6, 7];
let select = {
title: 'My Select',
subtitle: 'select via .ts',
inputs: [],
buttons: [{
text: 'ok',
handler: data => {
}
}]
}
for (var i=0; i<options.length; i++){
select.inputs.push({name: 'myInputs', type: 'checkboxes' , multiple: 'true', value: options[i]});
}
let newAlert = this.alertCtrl.create(select);
newAlert.present();
}
and btw, what do I replace inputs : [ ] with
cuz it shouldn’t be editable.
ok I solved the problem with checkbox and mutiple… but values do not show !! and also it shouldn’t be an input
Hi.
The multiple: true your can add on your select declaration, like:
title: mytitle, multiple: true
And i think if you set multiple to true it automaticaly uses checkboxes.
To show the valeu you need to add a label: option[i] to you select.inputs.push();
And thi should do the work.
Hi mr. Gabriel ,
I have followed your way and finally made it happen… now the thing that’s baffling me is how to pass the selected data back to the server.
This is my current code:
constructor(public schooAppUsers: SchooAppUsers) {
schoolAppUsers.loadAllCourses().subscribe(response => {
this.response = response;
}
// Action sheet code that displays a button and calls
this.addSelectedCourse();
addSelectCourse(){
let options = this.response;
let select = {
title: 'My Select',
inputs: [],
multiple: true,
buttons: [{
text: 'ok',
handler: data => {
}
}]
}
for (var i=0; i<options.length; i++)
{
select.inputs.push({name: 'myInputs', label: options[i].CourseName, value: options[i].CourseName, type: 'checkbox'});
}
let newAlert = this.alertCtrl.create(select);
newAlert.present();
}
I know that storing the Selected data back to the serve is done inside handler: data =>{}
and it displays the selected items. however ,should I loop through the service again in order to store it, and if so, how to do that ?? example of service for storing that I used before , passing user id and data.param which is course id or name , service is this:
this.schoolAppUsers.insertStudentCourse(this.UserID, data.param).subscribe(res => {
// display alert success or failure
}
Also where do I add a cancel button ?
thanks, much appreciated