import { Component } from ‘@angular/core’;
import { IonicPage, Platform, NavParams, ViewController, AlertController, NavController } from ‘ionic-angular’;
import {Validators, FormBuilder, FormGroup } from ‘@angular/forms’;
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>
<img id="img1" src="{{cara.image}}" (click)="imgs()" >
<ion-card-content>
<div>
<ion-grid>
<ion-row>
<ion-col>{{Header}}</ion-col> //i want the value here
<ion-col>
<ion-icon ios="ios-create" md="md-create" (click)="showPrompt('Header')"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div>
<ion-grid>
<ion-row>
<ion-col>{{detail}}</ion-col> // And also here
<ion-col>
<ion-icon ios="ios-create" md="md-create" (click)="showPrompt('Details')"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-card-content>
</ion-card>
`
})
export class CardPage {
private todo : FormGroup;
cara;
Header:String=‘Give heading’
detail:String=‘jgfyfrueiytgtfuyrgtfrgiuytyt’
constructor (
public platform: Platform,
public params: NavParams,
public navCtrl: NavController,
public viewCtrl: ViewController,
public alertCtrl: AlertController,
private formBuilder: FormBuilder
) {
this.todo = this.formBuilder.group({
title: ['', Validators.required],
description: ['']
});
var caard = [
{
image: 'assets/icon.png',
header: 'World Happiness Report 2017:Top 10 Happiest Countries in the World',
detail: 'The most popular industrial group ever, and largely',
}
];
this.cara = caard[this.params.get('charNum')];
}
logForm(){
console.log(this.todo.value)
}
showPrompt(title) {
let prompt = this.alertCtrl.create({
inputs: [
{
name: title,
value: “”+this.Header
}
],
buttons: [
{
text: ‘Save’,
handler: data => {
console.log(‘Saved clicked’+JSON.stringify(data));
this.Header=data.title
}
}
]
});
prompt.present();
}
}