Select to change language

Ionic Framework ionic-v3
1

Hi,

I’m using ionic 3.

I have a flag icon of the United Kingdom. I would like to open a dropdown list (ion-select and action-sheet interface) when I click on it.

I have tried two ways:

  1. Click on a flag icon then ion-select get info about that click and shows dropdown list.
  2. Put flag icons into ion-option.

None of this options doesn’t work for me. Can anyone help me?
Thanks.

2

Hello,

Can you post your code?

3 
<ion-item>
  <ion-label>Choose language</ion-label>
  <ion-select interface="action-sheet" (ionChange)="setLang($event)">
    <ion-option *ngFor="let lang of languages" value="{{lang}}" default>
        {{lang}}
    </ion-option>
  </ion-select>
</ion-item>

That code shows dropdown list.

I need to somehow show dropdown list but after click on the flag icon:

<img id="btnFlag" src="https://server.pl/images/flags/en.png">
4

Hello,

Please check if you can use the click event on the img tag and pass the language as argument as per below

<img id="btnFlag" (click)="open(en) "src="https://server.pl/images/flags/en.png">

And then in that function in your .ts, you can populate your select element based on the argument.

Ashley

5

Hello,

Yes, click event works in the img tag.

But how can I combine it with a dropdown list? That is the question. I need to somehow show dropdown list but after click on the flag icon :slight_smile:

6

ok. See as per below in your html

<ion-item *ngIf="isVisible">
  <ion-label>Choose language</ion-label>
  <ion-select interface="action-sheet" (ionChange)="setLang($event)">
    <ion-option *ngFor="let lang of languages" value="{{lang}}" default>
        {{lang}}
    </ion-option>
  </ion-select>
</ion-item>

And then in your .ts

private isVisible: boolean = false

open() {
this.isVisible = true;
}

Hope I understood correctly.

7

Thanks for the answer, but I have something else in mind.

I do not want to display the form field. I would like to click on the flag to display a “system” list in which you can select the language.

So:

  1. Click flag
  2. Immediately show dropdown list as in the image below:

image

Sorry if I wrong described my problem :slight_smile:

8

instead of using the ion-select, maybe you can use the action-sheet api directly. But then you will have to build the button element dynamically based on the language selected which I am not too sure about.

 presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({
     title: 'Modify your album',
     buttons: [
       {
         text: 'Destructive',
         role: 'destructive',
         handler: () => {
           console.log('Destructive clicked');
         }
       },
       {
         text: 'Archive',
         handler: () => {
           console.log('Archive clicked');
         }
       },
       {
         text: 'Cancel',
         role: 'cancel',
         handler: () => {
           console.log('Cancel clicked');
         }
       }
     ]
   });

   actionSheet.present();
 }
1 Like
9

Wow! Thank you very much! That’s it.

I will try to do the rest :slight_smile:

10

Glad I could help.

Cheers,
Ashley