Issue with ionic 2 Dropdown Menu

Question

I am going select one language from the drop down should has to go back and what ever the language I select, it has to appear besides my plus icon. Below is my code:

home.html file:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle icon-only>
        <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
       <img src="assets/images/home/KmartText.png">
    </ion-title>
    <ion-buttons end>
        <button ion-button icon-only>
            <ion-icon name="search"></ion-icon>
        </button>
        <button ion-button icon-only>
            <ion-icon name="cart"></ion-icon>
        </button>    
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-menu [content]="mycontent">
    <ion-header>
      <ion-item>
      <ion-icon name="contact" item-left></ion-icon>
      <ion-icon name="arrow-dropdown" item-right></ion-icon>
    Gmail
    </ion-item>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-item (click)="toggleLanguages()">
          Languages
          <ion-icon name="add" item-right *ngIf="languageShow"></ion-icon>
          <ion-icon name="remove" item-right *ngIf="languageHide"></ion-icon>
        </ion-item>
        <div *ngIf="languageHide" >

          <!-- All radio's in a radio group -->
          <ion-list radio-group [(ngModel)]="selectedLanguage">
            <ion-item *ngFor="let language of languages" (click)="doSomething(language)">
              <ion-label>{{language.name}}</ion-label>
              <ion-radio item-left [value]="language.id"></ion-radio> 
            </ion-item>
          </ion-list>

        </div>

        <ion-item>
            <ion-icon name="home" item-left></ion-icon>
              My Account
         </ion-item>

         <ion-item>
            <ion-icon name="clipboard" item-left></ion-icon>
              Orders
         </ion-item>

         <ion-item>
           <ion-icon name="alert" item-left></ion-icon>
             Notification
         </ion-item>

         <ion-item>
            <ion-icon name="cart" item-left></ion-icon>
            My Cart
         </ion-item>
      </ion-list>
   </ion-content>
</ion-menu> 

home.ts file:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';   

import { Rest } from '../../providers/network/rest';    
import { Logger } from '../../providers/logger/logger';    
import { ProductListPage } from '../product-list/product-list';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   languageShow: boolean = true;
   languageHide: boolean = false;
   selectedLanguage: number = 1;

   mySlideOptions = {
     initialSlide: 1,
     loop: true,
     autoplay: 1500,
     pager: true
   };

   languages =[ 
      {id: 1, name: 'English'},
      {id: 2, name: 'Hindi'},
      {id: 3, name: 'Telugu'},
      {id: 4, name: 'Tamil'}
  ];

  contructor() {

  }

  doSomething()
  { 
     // do something with the language here
     console.log(this.selectedLanguage);
     this.toggleLanguages();
  }

  // this is for toggling your languages dropdown
  toggleLanguages(){
    this.languageShow = !this.languageShow;
    this.languageHide = !this.languageHide;
 }

I have tried so many times but its not working. I have added the image below also. The language name should appear beside my plus icon. Any suggestions.

Answer 1

If you change the selectedLanguage to an any type and let it hold both the id and the name of a language, you can pass it on in doSomething(language). If you then assign the selected language to selectedLanguage you can use it in your html (to show next to 'Languages') as {{selectedLanguage.name}} (just make sure it's defined, so wrap it in a <span *ngIf="selectedLanguage"></span>.

Now, to make sure the dropdown goes back up again, call this.toggleLanguages() but that's already being called so not sure why it would be a problem?

home.html:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle icon-only>
        <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
       <img src="assets/images/home/KmartText.png">
    </ion-title>
    <ion-buttons end>
        <button ion-button icon-only>
            <ion-icon name="search"></ion-icon>
        </button>
        <button ion-button icon-only>
            <ion-icon name="cart"></ion-icon>
        </button>    
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-menu [content]="mycontent">
    <ion-header>
      <ion-item>
      <ion-icon name="contact" item-left></ion-icon>
      <ion-icon name="arrow-dropdown" item-right></ion-icon>
    Gmail
    </ion-item>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-item (click)="toggleLanguages()">
          Languages
          <!-- only show if selectedLanguage is defined --> 
          <span *ngIf="selectedLanguage">{{selectedLanguage.name}}</span>    

          <ion-icon name="add" item-right *ngIf="languageShow"></ion-icon>
          <ion-icon name="remove" item-right *ngIf="languageHide"></ion-icon>
        </ion-item>
        <div *ngIf="languageHide" >

          <!-- All radio's in a radio group -->
          <ion-list *ngIf="selectedLanguage" radio-group [(ngModel)]="selectedLanguage.id">
            <ion-item *ngFor="let language of languages" (click)="doSomething(language)">
              <ion-label>{{language.name}}</ion-label>
              <ion-radio item-left [value]="language.id"></ion-radio> 
            </ion-item>
          </ion-list>

        </div>

        <ion-item>
            <ion-icon name="home" item-left></ion-icon>
              My Account
         </ion-item>

         <ion-item>
            <ion-icon name="clipboard" item-left></ion-icon>
              Orders
         </ion-item>

         <ion-item>
           <ion-icon name="alert" item-left></ion-icon>
             Notification
         </ion-item>

         <ion-item>
            <ion-icon name="cart" item-left></ion-icon>
            My Cart
         </ion-item>
      </ion-list>
   </ion-content>
</ion-menu> 

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';   

import { Rest } from '../../providers/network/rest';    
import { Logger } from '../../providers/logger/logger';    
import { ProductListPage } from '../product-list/product-list';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   languageShow: boolean = true;
   languageHide: boolean = false;
   selectedLanguage: any = {id: 1, name: 'Hindi'};

   mySlideOptions = {
     initialSlide: 1,
     loop: true,
     autoplay: 1500,
     pager: true
   };

   languages =[ 
      {id: 1, name: 'Hindi'},
      {id: 2, name: 'Telugu'},
      {id: 3, name: 'Tamil'}
  ];

  contructor() {
  }

  doSomething(language: any)
  { 
     this.selectedLanguage = language;
     // do something with the language here
     console.log(this.selectedLanguage);
     this.toggleLanguages();
  }

  // this is for toggling your languages dropdown
  toggleLanguages(){
    this.languageShow = !this.languageShow;
    this.languageHide = !this.languageHide;
 }