How insert text in div tag of file or sqlite database?

Ionic Framework ionic-v3
1

Hi, I’m trying to insert a word from a .txt or sqlite file into a div. How can I do this from the .ts file?

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-content class="card-background-page" >
      <ion-card>
        <img src="assets/imgs/lo.jpg"/>
        <div class="card-title">{{textInput}}</div>
      </ion-card>
      <div class="button-card"><button ion-button small color="primary" menuToggle [navPush]="textInput">next</button></div>
    </ion-content>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {ContactPage}  from  '../contact/contact';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }
  textInput(){
    this
  }
}
2

Always declare types of everything, whether they be properties, arguments, or return values of functions. In your case, your template is treating textInput as a property (which is good), but in the controller it is a method (which is bad). Make textInput a property in the controller.

3

I made changes to the code, but now the following error is happening:
Uncautch(in promise):Error:No component ffactory found for function(){…}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-content class="card-background-page" >
      <ion-card>
        <img src="assets/imgs/lo.jpg"/>
        <div id="text" class="card-title">{{ text_input }}</div>
      </ion-card>
      <div class="button-card"><button ion-button small color="primary" menuToggle [navPush]="insertTex">Proxíma palavra</button></div>
    </ion-content>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {ContactPage}  from  '../contact/contact';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public text_input:string = "Name";

  constructor(public navCtrl: NavController) {

  }
  public insertTex():void{
    this.text_input = "FILE ENTRY";
  }
}
4

Hello,

if I see it correct, then you have in html a property binding like

[navPush]="insertTex"

On ts side is there no variable insertTex or a function that return something you can bind.

You have a function insertText, that’s return is void. AFAIK [navPush] needs a reference to a page (see doc). If you change return type void, then will still nothing happen, because there is no return inside.

Maybe easier is to declare a variable called insertTex that hold your reference like

insertTex = myreference;

IMHO is [navPush] a directive you can replaced by (click)=‘mymethod()’, where mymethod contain the logic of your navigation. I personal like this approach more because it is more agnostic,

Best regards, anna-liebt

1 Like