How to change the title of an ion-card?

Question

Hello, I am trying to change the title of an ion-card from the home.ts inserted words that are in a.txt or sqlite file. Someone could help me, as I am new using the Ionic do not know how to do.

The following code are, home.ts, home.scss and home.html:

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
  }
}

page-home {
  
}
.card-background-page {

  ion-card {
    position: relative;
    text-align:inherit;
    background: blue;
  }

  .card-title {
    text-align: center;
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }
  .button-card{
    text-align: center;
  }

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }

}

<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]="texInput">Proxíma palavra</button></div>
    </ion-content>
</ion-content>

Answer 1

You do this easily using interpolation. In home.ts you manipulate a variable according to your need. In the example below is the caption, in the constructor I change its value to "My card". Note that in the HTML file I used interpolation {{}}, in the case {{tituloCard}}. You can make changes at any time. I hope I helped.

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

private tituloCard:string;
export class HomePage {

  constructor(public navCtrl: NavController) {
   this.tituloCard =  "Meu card";
  }
  
}

<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">{{tituloCard}}</div>
      </ion-card>
      <div class="button-card"><button ion-button small color="primary" menuToggle [navPush]="texInput">Proxíma palavra</button></div>
    </ion-content>
</ion-content>