I have encountered an issue where I am passing a boolean function in the ngIf attribute instead of a boolean condition in my HTML template file. This boolean function seems to be repeating itself depending on the amount of data present in the variable 'messages'. For example, if there are 2 objects in 'messages', the value of 'ctr' in the console is increasing from 1 to approximately 69, rather than just 1 or 2. What could be causing this behavior and how can it be avoided when passing a function in the ngIf attribute?
HTML
<ion-row *ngFor="let message of messages; let i = index; trackBy:trackByMsgId">
<ion-badge *ngIf="isNewDate(i)" color="primary" class="ion-margin">{{message.time | date: 'longDate'}}</ion-badge>
</ion-row>
TS
let ctr = 0;
isNewDate(i) {
this.ctr += 1;
console.log('ctr: ', this.ctr);
return true;
}