How to display a counter variable inside ion-card?

Ionic Framework ionic-v3
#1

Hai guys…I am new to ionic and I need to place the variable’s value(var count) inside ion-card.(this variable is dynamic it actually gets incremented when a new users registers in firebase)…i tried the following code …but is not printing the number…

 <ion-card>
     <ion-card-header>
        {{ count }}
    </ion-card-header>
    <ion-card-content>
         Total Seats
   </ion-card-content>

and my typescript is
:

constructor(public navCtrl: NavController, public menu: MenuController,public popoverCtrl:     PopoverController) {
    var db = firebase.database();
var ref = db.ref("Creative");

var count=0;

ref.on("child_added", function(snap) {
 count++;
   		console.log("added:", snap.key);
});
ref.once("value", function(snap) {
console.log("initial data loaded!", snap.numChildren() === count);
console.log("initial data loaded!"+count);
});
}

how can i access the count inside card?Thanks in advance…

#2

Just make count as class property instead of a local variable like below and use this.count to set the value like below

export class SomeClass {
count = 0;
constructor() {
this.count = 1;
}
}

1 Like
#3

thanks sir …now i am getting the number(as 1) inside card… but it is not getting incrimented and also i am getting error as EXCEPTION: TypeError: Cannot read property ‘count’ of null

export class TutorialPage {
 slides: Slide[];
showSkip = true;
count = 0;

constructor(public navCtrl: NavController, public menu: MenuController,public popoverCtrl:    PopoverController) {

      var db = firebase.database();
   var ref = db.ref("Creative");

//var count=0;
this.count=1;
ref.on("child_added", function(snap) {
 this.count++;
   		console.log("added:", snap.key);
});

ref.once("value", function(snap) {
console.log("initial data loaded!", snap.numChildren() === this.count);
console.log("initial data loaded!"+this.count);
//this.seat = count;
});
    }

sir…where i am going wrong?the second last line is not getting printed( console.log(“initial data loaded!”+this.count);
)

#4

I am suspecting the above inline functions. Replace
function(snap) {
//Your code
}
with
(snap) => {
//your code
}

1 Like
#5

thank you sir, thanks a lot…now working perfectly right…god bless you