Set a value to a variable

Ionic Framework ionic-v3
1

I need help, i’m a newbie on ionic 3
the app i’m trying to make its simple, 2 pages HomePage and ConfigPage

the home page has a iframe
the config page has a input and a button

all i want to do its just save the input string in a variable and use it on iframe src(homepage)

errors on iframe src, and the variable is not updated
(sorry for bad english)

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
    <img (click)="navigateToConfig()" src="http://www.freeiconspng.com/uploads/settings-icon-11.png" width="25">
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content overflow-scroll="false">
<iframe src="{{cp.linkapp}}" frameborder="0"></iframe>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ConfigPage } from "../config/config";

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

  

  constructor(public navCtrl: NavController) {
    

  }


  navigateToConfig(): void {
    this.navCtrl.push(ConfigPage);
  }

}

config.html

<ion-header>
  
    <ion-navbar>
      <ion-title>Configurações</ion-title>
    </ion-navbar>
  
  </ion-header>
  
  
  <ion-content padding>
    <ion-item>
  
      <ion-label floating>Link</ion-label>
  
      <ion-input type="text" [(ngModel)]="linkapp"></ion-input>
  
    </ion-item>
  
    <button ion-button block (click)="saveLink(linkapp)">Salvar</button>
  
  </ion-content>

config.ts

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


@IonicPage()
@Component({
  selector: 'page-config',
  templateUrl: 'config.html',
})
export class ConfigPage {

  public linkapp: string;

    constructor(public navCtrl: NavController) {
  
   
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad ConfigPage');
    }

    saveLink(linkapp: string) {
      this.linkapp = linkapp;
    }
  
    

}
2

Change this if you can. iframes don’t play well with Angular/Ionic.

2 Likes