Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70435

Need some help with getting these radio buttons to work

$
0
0

@Squidley wrote:

I took some code I had from a previous college assignment learning about radio buttons and I’m trying to use them again for my Easter project, a currency exchange app(hence the odd names). But when i run it I get an error that says “Uncaught (in promise): invalid link: goToCurrencyConverter()” which i have in my home page.
Here is my code:

home.html

<ion-header>
  <ion-navbar>
    <ion-title text-center>
      Currency Converter
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <img height="400" width="450" src="https://s3.amazonaws.com/babypips-media-production/images/2017/03/09071328/global-currency-symbols.jpeg">

  <p text-center>THIS IS WHERE CURRENCY RATES GO</p>
  <div class="center">
  <button ion-button round color=primary (click)="goToCurrencyConverter()">Converter</button>
  </div>
</ion-content>

home.ts

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

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

  constructor(public navCtrl: NavController) {

  }
  goToCurrencyConverter(){
    this.navCtrl.push("ConverterPage");

  }

}

converter.html

<ion-header>
  <ion-navbar>
    <ion-title text-center>Converter</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list radio-group [(ngModel)]="emotion">
    <ion-item>
      <ion-label>Happy</ion-label>
      <ion-radio value="happy"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Sad</ion-label>
      <ion-radio value="Sad"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Lazy</ion-label>
      <ion-radio value="Lazy"></ion-radio
        ></ion-item>
     <ion-item>
        <ion-label>Energetic</ion-label>
        <ion-radio value="Energetic"></ion-radio>
      </ion-item>
      </ion-list>
      <button ion-button large (click)="onSave()">Save</button>
      <h2>Your status is: {{information}}</h2>
</ion-content>

converter.ts

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


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

export class ConverterPage {
  emotion:string;
  information:string;
  constructor(public navCtrl: NavController, public navParams: NavParams,private storage: Storage) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ConverterPage');
  }
  onSave(){
    console.log(this.emotion);

    this.storage.set("status",this.emotion);
    }
    ionViewWillEnter(){
      this.storage.get("status").then((data) => {
          this.information=data;
      })
        .catch((err) => {
          console.log("Error = " + err);
        })
  
    }
  

}

Any help is appreciated

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 70435

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>