How to highlight the selected thing in ionic 2?


#1

I would like to get my selected language name should be highlighted…

Home.html:file

<ion-menu [content]="mycontent">
  <ion-header class="sidemenu-header" menuClose>
    <ion-navbar>
      <ion-title>
        <ion-icon name="contact" item-left></ion-icon>
        {{loginData.data.customer.email}}
      </ion-title>

      <ion-buttons end>
        <button ion-button icon-only >
          <ion-icon name="arrow-dropdown"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>
  </ion-header>

  <ion-content>
      <ion-list>
        <ion-item (click)="toggleLanguages()" class="content">      

          <ion-icon name="create" item-left class="create-lang"></ion-icon>
            Language
          <span *ngIf="languageShow" class="lang-name">
            {{languageChoosen}}
          </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 radio-group [(ngModel)]="selectedLanguage" (ionChange)="doSomething($event)" class="list-space" selected="true">

            <ion-item *ngFor="let language of languageArray; let val = index" class="radio"> 
              <ion-label menuClose>{{language.local}}</ion-label>
              <ion-radio item-left [value]="language" menuClose selected="language[0]"></ion-radio> 
            </ion-item>

          </ion-list>

        </div>

Home.ts:file

//here bala code 

  languageShow: boolean = true;
  languageHide: boolean = false;
  email
  selectedLanguage
  languageArray =[];

  loginData

  languageChoosen

doSomething(event){ 
    this.logger.info("invoking dosomething fun");
    this.logger.debug("checking event params "+event);

    let languageObj

    if(event){
      languageObj = {
        lang_id: event.lang_id
      }

      this.logger.debug("cheking languageObj " + JSON.stringify(languageObj));
      // this.holders.presentLoadingCustom();

      this.rest.post('/language',languageObj)
      .subscribe((result)=>{;
        // this.holders.dissmissLoadingCustom()
        this.logger.debug("checking data of success " +JSON.stringify(result));
        if(result.status == '1'){
          this.logger.debug("checking "+this.selectedLanguage);
          this.selectedLanguage = '';
          this.toggleLanguages();
          for(var i = 0; i < this.languageArray.length; i++){
            if(languageObj.lang_id == this.languageArray[i].lang_id){
              this.languageChoosen = this.languageArray[i].local;
            }
          }
          this.checkLanguageReq();
        }
        else{
          this.logger.info("error");
        }
      });

    }
    else{
      this.logger.info("error of languages automatic call");
    }

  }
 // this is for toggling your languages dropdown
  toggleLanguages(){

    this.logger.info("invoking toggle fun");
    this.languageShow = !this.languageShow;
    this.languageHide = !this.languageHide;
      // console.log("this is gmail",this.email);
  }

Here i got selected language (telugu) when i clicks on the language(+ or -) icon the language should not be highlighting…Means the what ever the language selected that language should have to highlighted right…When we are logged into the app then it showing the language should be highlihted

Here we have selected the language (telugu).After clicking the language(+ or -) icon the language is not highlighting…