how to use setter and getter from html page in ionic 2

Question

I am in the need to set a value (variable) and get change after performing some specific task.
I would like to share my system environment, which is as below-

******************************************************
Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68
******************************************************

I wanted to use setter and getter to get this task done, see what i did-
mypage.ts-

import {NavController, NavParams, Content} from 'ionic-angular';
export class ListPage {
  constructor(private navCtrl: NavController, navParams: NavParams) {
    this.counter = 0;
  }
  public counter;

  getCounter(){
    return this.counter;
  }

  setCounter(count) {
    this.counter = count;
    // console.log(this.counter);
  }
}

and this is html template as-

<div *ngIf= "( getCounter()== '0')">
   .....
     ...  
      ..
     ...
   .....
</div>
<div (click)= (setCounter(getCounter()+1))
</div>
 some= line of codes
    ....
    ....
    ....
on bottom
<div ( setCounter(0))>
</div>

I am able to get the value which is 0, but don't know how to set it. I want to set value without (click) even i have used click but i don't know how to do without click.

here are list of source URL which I have seen-

How i can get input value within ionic 2 in my Component?
Angular 2 call a function/method when an event is emitted
How to call another components function in angular2
List 2 was a little bit useful but can't help me out.

Hope for help

I wanted to increment automatically, without any (click) event, don't know which directive event will work... — S.Yadav, Dec 29 '16 at 12:42
Yes @raj I want increment. && suraj I don't want to do with timer, but with the execution flow. — S.Yadav, Dec 30 '16 at 06:10
I have added an answer which I think what you are lloking for. If not You need to explain when you want to increase the counter. — raj, Dec 30 '16 at 06:43

score 1 · Answer 1 · edited May 23 '17 at 12:34

1

See the link get and set in TypeScript

get Counter(){
    return this.counter;
  }

In HTML

<div *ngIf="Counter== '0'">
<div (click)= "setCounter(Counter+1)>"

edited May 23 '17 at 12:34

Community

1
1

answered Dec 29 '16 at 13:21

Habeeb

1,020
16
35

Thanks for your effort @habeeb, very first- you have used wrong closing of quotes, so it's not going to work {.
" ==> .
}. 2. if you read carefully- I have mentioned that i don't want to to it on click.
– S.Yadav Dec 30 '16 at 06:16

score 0 · Answer 2 · answered Dec 30 '16 at 06:42

This example below will increase the counter each time the page is visited. ionViewDidEnter will be called each time page is viewed. Hope this is what you are lloking for.

export class ListPage {
  constructor(private navCtrl: NavController, navParams: NavParams) {
    this.counter = 0;
  }
  public counter;

  ionViewDidEnter(){
    this.setCounter(this.getCounter() + 1 ) ;
  }

  getCounter(){
    return this.counter;
  }

  setCounter(count) {
    this.counter = count;
    // console.log(this.counter);
  }
}

Right! but @raj I am in the need to do this from .html page not from .ts, something like — S.Yadav, Dec 30 '16 at 07:07

how to use setter and getter from html page in ionic 2

2 Answers2