Ion-select with icon

Ionic Framework ionic-v3
1

Is it possible to add add an icon to a ion-select component?

I want a button in the right of the navbar and if I click it it will has to show me a ion-select.

Any ideas?

2

can you please elaborate a little bit

3

I want to get the select modal from a button in the navbar:
Supose I have a list, and I want to see only an icon in the navbar, to filter the list, and when i click the button I get the select options, like that:

image
sample.png388×750 45 KB

4

try with <ion-select><ion-icon name="home" item-left></ion-icon></ion-select> but i didn’t try it

5

it doesn’t work, no icon is displayed regards the button is hidden there and works…

6

I tried that:

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Sample</ion-title>
    <ion-buttons end>
      <ion-icon name="home">
        <ion-select>
          <ion-option value="1">Option 1</ion-option>
          <ion-option value="2">Option 2</ion-option>
          <ion-option value="3">Option 3</ion-option>
        </ion-select>
      </ion-icon>
    </ion-buttons>
  </ion-navbar>
</ion-header>

It works in some way but I lost the styles of the icon:

image

Another problem is that when I select an option in the select, something appears in the bottom of the icon, like some dots “…”

image

1 Like
7

it true, it doesn’t work. share when you’ll fix it :smirk:

8

Hi @alejandrocao, @arsene123, @ntpl_thavarajan

This work for me (Ionic 2.0.0 Final).

//my-page.html
<ion-header>
    <ion-navbar>
        <ion-title>Example</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="doFilter()">
            <ion-icon name="funnel"></ion-icon>
          </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-select #sectionSelect [(ngModel)]="filter">
        <ion-option *ngFor="let section of sections" [value]="section.id">{{section.description}}</ion-option>
    </ion-select>

     .....
</ion-content>


//my-page.ts
import { Select } from 'ionic-angular';

@Component({
    selector: 'my-page',
    templateUrl: 'my-page.html'
})

export class MyPage {
	@ViewChild('sectionSelect') sectionSelect: Select;
	...
	
	doFilter() {
		 this.sectionSelect.open();
	}
	
	...
	
}

//my-page.scss
my-page {
    ion-select {
         position: absolute;
        .select-icon, .select-text {
            display: none !important;  /* hidden triangle icon and selected text */
        }
    }
}
3 Likes
10

Hi, @alejandrocao

Here is code to open ion select using header bar icon
Template file

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Editor Picks</ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="doFilter()">
          <ion-icon name="funnel"></ion-icon>
      </button>
   </ion-buttons>

  </ion-navbar>
</ion-header>

<ion-content>
  <ion-select #sectionSelect (ngModel)="selecteTopic"  (ionChange)="topicChange($event,selecteTopic)">
    <ion-option value="0" selected="true">Topics</ion-option>
    <ion-option *ngFor="let topiclist of allTopics" value="{{topiclist.term_id}}"   [innerHTML]="topiclist.taxonomy_term_data_name">
  </ion-option>
</ion-select>
</ion-content

component file

import { Component ,ViewChild } from '@angular/core';
....
  @ViewChild('sectionSelect') sectionSelect: Select;
....
doFilter(){
    this.sectionSelect.open();
    console.log('hello')
 }

Hope this will help you.
Thanks

3 Likes
11

Instead of your scss code, you can just add the ‘hidden’ attribute in the ion-select tag

12

how to archive in ionic
image

1 Like
13

In Ionic 4 ducument, when use a open method, it is written the open type is depending on the interface property on the ion-select. But it doesn’t work.

14

you need to do this

this.sectionSelect.interface = 'popover'; // or alert or action-sheet
this.sectionSelect.open(event);
15

Did you find a solution to achieve this result