I need to update the notification badge. so I create the my-notification component. because of the need to show on every page.
here is my my-notification.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'my-notificationbadge',
templateUrl: 'my-notificationbadge.html'
})
export class MyNotificationbadgeComponent {
@Input("mytext") texttouse;
@Output() somethingHappen=new EventEmitter();
number: number;
constructor() {
console.log('Hello MyNotificationbadgeComponent Component');
this.number= 0;
}
ngAfterViewInit(){
this.number=this.texttouse;
let interval= setInterval(()=>{
this.somethingHappen.emit();
console.log("check");
},3000);
}
}
my-notification.html
<button id="notification-button" ion-button clear>
<ion-icon name="notifications">
<ion-badge id="notifications-badge" color="danger">{{number}}</ion-badge>
</ion-icon>
</button>
my home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
myhometext:number=1;
hh:number;
constructor(public navCtrl: NavController) {
}
dosomething(){
this.myhometext= this.myhometext+1;
this.hh=this.myhometext;
console.log(this.myhometext);
console.log("check my log");
}
}
my home.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle="left">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title ion-center>ttmind Quiz</ion-title>
<button ion-button menuToggle="right" right>
<my-notificationbadge [mytext]="myhometext" (somethingHappen)="dosomething()"></my-notificationbadge>
</button>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
dosomething() function is call but not change. how to change it.