CODEWITHSUNDEEP
javascriptangularionic2
peer
peer

Reputation: 1019

Ionic 2 - Access ngModel in controller

I'd like to access my ngModel in a controller, for some reason I can't find out how to do it. I've got a radio-group (which does not belong to a form, but just to a splashscreen where users can personalize the application.

My html:

<ion-list radio-group [(ngModel)]="language">
    <ion-list-header style="word-break: normal;">
        {{ languageText }}
    </ion-list-header>

    <ion-item>
        <ion-label>Nederlands</ion-label>
        <ion-radio value="nl"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>English</ion-label>
        <ion-radio value="eng"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Deutsch</ion-label>
        <ion-radio value="du"></ion-radio>
    </ion-item>
</ion-list>

I want to access the ngModel: language in my controller:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { HomePage } from '../home/home';

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

export class IntroPage {

  welcomeTitle: any;
  languageText: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {

    this.displayLanguage();
  }

  finishIntro() {

    this.storage.set('introShown', true);
    this.navCtrl.setRoot(HomePage);
  }

  displayLanguage() {

  }

}

Upvotes: 0

Views: 1685

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29614

ngModel is the two-binding functionality from Angular 2.

If you are having 

<ion-list radio-group [(ngModel)]="language">

language needs to be a variable in your component.

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

export class IntroPage {

  welcomeTitle: any;
  languageText: any;
  language:any;//here

Any change in language in the html or component side is reflected in the other.

Upvotes: 2

Related Questions