How to pass some text or paragraph from a page to another page


  <img src="assets/imgs/2.jpg"/>
  <div class="card-title">****</div>
  <div class="card-subtitle">****</div>
  <div class="btn">
    <button ion-button full (click)="AreaPage()">Enter</button>

I want to pass the card-title & card-subtitle directly to my area.html[AreaPage] when clicking the button from HomePage.

<div class="area">
    {{}}   <--here


this.navCtrl.push('AreaPage', {
        title: title
        subtitle: subtitle


import { IonicPage, NavParams } from 'ionic-angular';

    private navParams: NavParams,
  ) {}

ionViewDidEnter() {
    this.title = this.navParams.get('title');
    this.subtitle = this.navParams.get('subtitle');

please format it correctly

ReferenceError: ‘title’ is not defined

how can i define this to my


write above constructor

public title: string;

ReferenceError: ‘title’ is not defined

how can i define this to my


just add this

<div class="area">
    {{ title }}   <--here

i already did that buy the title is not define as class=“card-title”

not possible how come error on class

does title: title will defile whats inside the class=“card-title”>Super Man</div

i think it’s not

You can use dependency injector. Here is an example.

  1. Create cardService.ts
  2. Add class properties --> public title: string; public subtitle: string;
  3. Register this service in your app.module.ts providers array.
  4. Now inject service in & using their constructors.
  5. Use cardService.title & cardService.subtitle in your both pages, or you want to use those properties in any other page you can do that as well.

Hope it helps.

1 Like