How to change the title of an ion-card?

Question

How to change the title of an ion-card?

Navigation

#1 by (0 votes)

0

Hello, I'm trying to change the title of an ion-card from the home.ts inserted words that are in a .txt or sqlite file. Could someone help me, as I am new using ionic I 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>

ionic typescript

asked by anonymous 25.07.2018 / 03:46

1 answer

Accessor / Laravel Mutator Translation error on adminLTE template buttons

score 0 · 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 titleCard, in the constructor muted the value of it to "My card". Notice that in the HTML file I used interpolation {{}}, in the case {{tituloCard}}. You can make changes at any time. I hope I have 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>