How to parametrize the values

Ionic Framework ionic-v3
1

import { Component } from ‘@angular/core’;
import { IonicPage, Platform, NavParams, ViewController, AlertController, NavController } from ‘ionic-angular’;
import { ImagesPage } from ‘…/images/images’;

@IonicPage()
@Component({
selector: ‘page-card’,
templateUrl: ‘card.html’,
template: `



ModalPage


<button ion-button (click)=“closeModal()”>
Cancel




<ion-card no-padding class="card">
  <img id="img1" src="{{cara.image}}" (click)="imgs()">
  <ion-card-content>
  <div>
    <ion-grid>
      <ion-row>
        <ion-col>{{Header}}</ion-col>
        <ion-col>
          <ion-icon ios="ios-create" md="md-create" (click)="showPrompt('heed')"></ion-icon>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <div>
    <ion-grid>
      <ion-row>
        <ion-col>{{Details}}</ion-col>
        <ion-col>
          <ion-icon ios="ios-create" md="md-create" (click)="showPrompt('deet')"></ion-icon>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  </ion-card-content>
</ion-card>

`
})
export class CardPage {

cara;
Header:String=‘Give heading’
Details:String=‘Give Details in paragraph’

constructor (
public platform: Platform,
public params: NavParams,
public navCtrl: NavController,
public viewCtrl: ViewController,
public alertCtrl: AlertController
) {

var caard = [
  {
    image: 'assets/icon.png',
    Header: 'World Happiness Report 2017:Top 10 Happiest Contries in the World',
    Details: 'The most popular industrial group ever, and largely'
  }
];
this.cara = caard[this.params.get('charNum')];

}

imgs() {
this.navCtrl.push(ImagesPage,{})
}

closeModal() {
this.viewCtrl.dismiss();
}

showPrompt(title) {
let prompt = this.alertCtrl.create({
title: heed,
inputs: [
{
name: ‘heed’,
value: “”+this.Header
}
],
buttons: [
{
text: ‘Save’,
handler: data => {
console.log(‘Saved clicked’+JSON.stringify(data));
this.Header=data.heed;
}
}
]
});
prompt.present();
}

}