Change detection running infinitely when function is used with ngIf - angularjs

Question

I am working on an Ionic 2 project. The template has a ngIf to check if its the right user.
show.ts
constructor( public book: Bookemon ){}
rightUser(){
console.log('right user');
return this.book.rightUser(this.hunt.user.id);
}
bookemon.ts (bookemon and auth are services )
rightUser(id: number){
return this.auth.user.id === id;
}
show.html
<ion-content fullscreen="true">
<div id="image-modal" >
<img [src]="imageSource(hunt.picture_url)" (click)="dismissModal()" >
<button ion-fab mini *ngIf = " !hunt.picture_url " (click)="showEditHuntModal()" color="ionic">
<ion-icon name="add" ></ion-icon>
</button>
<button color="danger" class="new-claim" ion-button round icon-left *ngIf = "rightUser() && hunt.claims.length " (click)="openClaimModal(hunt)">
<ion-icon name="trophy"></ion-icon>
New Claim
</button>
</div>
<div class="hunt-content">
<button small clear ion-button icon-only class="options" *ngIf="rightUser()" (click)="presentAction()">
<ion-icon name="md-more"></ion-icon>
</button>
<hunt [hunt]="hunt" [huntedUser]="huntedUser" ></hunt>
</div>
<ion-fab *ngIf="hunt.dfu !== undefined" bottom (click)="dismissModal('rejected')" class="close-fab">
<button ion-fab color="danger" ><ion-icon name="close" ></ion-icon></button>
</ion-fab>
<ion-fab *ngIf="hunt.dfu !== undefined" bottom (click)="dismissModal('accepted')" class="heart-fab">
<button ion-fab color="primary" ><ion-icon name="heart" ></ion-icon></button>
</ion-fab>
</ion-content>
The template displays some content based on *ngIf = "rightUser()"
Everything works fine except , the console is logged with infinitely many right user which comes from rightUser() function. The expected behaviour should be right user logged once in console and no more change detection being run.
Is it a bad practice to use functions in ngIf ? What is triggering change detection infinite times here?
Edit
I tried a function with ngIf in a fresh project and it doesnt run change detection infinite times. I am not sure whats causing it here. Here is my show.ts in case that helps.
export class ShowPage {
hunt: Hunt ;
huntedUser: User;
editHuntPage= EditHuntPage;
claimHuntPage = ClaimHuntPage;
rightUser: Boolean;
constructor(public alert: AlertController , public modal: ModalController, public events: Events
, public toastCtrl: ToastController, private navParams: NavParams , public action: ActionSheetController
, public book: Bookemon , public viewCtrl: ViewController, public nav: NavController) {
console.log(navParams.data);
this.hunt = navParams.data.hunt;
this.rightUser = this.book.rightUser(this.hunt.id);
}
ionViewDidLoad(){
console.log('view');
if(this.hunt.status == "hunted"){
this .book.getHuntedUser(this.hunt).subscribe( (res) => {
this.huntedUser = res.json();
console.log(this.huntedUser);
})
}
}
imageSource(pic: string){
return pic ? pic : CONFIG.noHuntPic ;
}
dismissModal(status?: string){
console.log('dismiss');
this.viewCtrl.dismiss(status);
}
presentAction(){
let actionSheet = this.action.create(
{
title: this.hunt.title ,
buttons: [
{
text: 'Edit',
handler: () => {
let trans = actionSheet.dismiss();
trans.then( () => {
this.showEditHuntModal();
})
return false;
}
},
{
text: 'Delete',
role: 'destructive',
handler: () => {
let trans = actionSheet.dismiss();
trans.then( () => {
this.deleteAlert();
})
return false;
}
},
{
text: 'Cancel',
role: 'cancel',
}
]
})
actionSheet.present();
}
showEditHuntModal(){
let modal = this.modal.create(EditHuntPage,this.hunt);
modal.present();
modal.onDidDismiss( (data) => {
if(data){
this.hunt = data;
}
})
}
deleteAlert(){
let alert = this.alert.create({
title: 'Confirm',
message: 'Do you want to delete this hunt?',
buttons: [{
text: "Delete",
handler: () => { this.deleteHunt() }
}, {
text: "Cancel",
role: 'cancel'
}]
})
alert.present();
}
deleteHunt(){
this.book.deleteHunt(this.hunt.id).subscribe( (res) => {
// this.events.publish("user-hunts:deleted",this.hunt);
this.viewCtrl.dismiss("deleted",this.hunt);
}, (err) => {
this.handleError(err);
})
}
openClaimModal(hunt){
let claimModal = this.modal.create(ShowClaimPage,{hunt: hunt})
claimModal.present();
}
rightUser(){
console.log('right user');
return this.book.rightUser(this.hunt.user.id);
}
handleError(err){
console.log(err);
let error= err.message ? err.message : "Error occured";
let toast = this.toastCtrl.create({ message: error, duration: 2000 , position: 'top'});
toast.present();
}
}

Answer 1

angular uses zones.js to detect if something changes in your app so it will check ngIf each time, you can this something like this :
<button small clear ion-button icon-only class="options" *ngIf="isRightUser" (click)="presentAction()">
<ion-icon name="md-more"></ion-icon>
</button>
//...
<button small clear ion-button icon-only class="options" *ngIf="isRightUser" (click)="presentAction()">
//show.ts
isRightUser:boolean;
constructor( public book: Bookemon ){}
ngOnInit(){
this.isRightUser= rightUser();
}
rightUser(){
return this.book.rightUser(this.hunt.user.id);
}