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

home.html[HomePage]

<ion-card>
  <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>
  </div>

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
  </div>

HomePage

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

AreaPage

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

constructor(
    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

card-title

write above constructor

public title: string;

ReferenceError: ‘title’ is not defined

how can i define this to my

card-title

just add this

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

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 home.page.ts & area.page.ts 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