CODEWITHSUNDEEP
javascriptangularjsionic-frameworkionic2
Imtiaz Hussain
Imtiaz Hussain

Reputation: 1

ionic2 data retrieving from a function to html page

I have this code and I need the datee1 value in my HTML page, how can I do this?

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-edcfromlmp',
  templateUrl: 'edcfromlmp.html'
})
export class EdcfromlmpPage {

    myDate: String = new Date().toISOString();

    constructor(public navCtrl: NavController, public navParams: NavParams) {}

    datechange(datee) {
        datee = new Date(datee);
        var datee1 = datee.setDate(datee.getDate() + 280);
        datee1 = new Date(datee1);
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad EdcfromlmpPage');
    }
}

Upvotes: 0

Views: 42

Answers (2)

Ivar Reukers
Ivar Reukers

Reputation: 7719

Assign it to a publicly accessible variable (this.variableName)

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-edcfromlmp',
  templateUrl: 'edcfromlmp.html'
})
export class EdcfromlmpPage {
    htmlDate: any; //create a variable
    myDate: String = new Date().toISOString();

    constructor(public navCtrl: NavController, public navParams: NavParams) {}

    datechange(datee) {
        datee = new Date(datee);
        var datee1 = datee.setDate(datee.getDate() + 280);
        datee1 = new Date(datee1);
        this.htmlDate = datee1; // assign it
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad EdcfromlmpPage');
    }
}

then in your HTML just call

<p>{{htmlDate}}</p> <!-- will print [Object object] probably -->
<p>{{htmlDate | date: 'dd/MM/yyyy'}}</p> <!-- will print 26/01/2017 -->

Upvotes: 1

joed4no
joed4no

Reputation: 1363

Public variables declared in a component class are available to that component's template. You can just make a public variable called datee1 in the class like this:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-edcfromlmp',
  templateUrl: 'edcfromlmp.html'
})
export class EdcfromlmpPage {

    datee1: Date
    myDate: String = new Date().toISOString();

    constructor(public navCtrl: NavController, public navParams: NavParams) {}

    datechange(datee) {
        datee = new Date(datee);
        var tempDate = datee.setDate(datee.getDate() + 280);
        this.datee1 = new Date(tempDate);
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad EdcfromlmpPage');
    }
}

Then you can just refer to datee1 in your edcfromlmp.html HTML template page. For example you can do <h1>{{datee1}}</h1> to print the datee1 variable as an h1 header. Be aware that variables from component classes are only scoped to that components template page.

Upvotes: 0

Related Questions