Why do I need to use ChangeDetectionStrategy?

I am using Ionic 2.

Here is my code:

<div class="messagesholder"
*ngFor="let chat of chatval | orderby:'[date]'; let i = index;let first=first;let last = last;">
{{last ? callFunction() : ''}}

<div *ngIf="chat.sender == currentuser || chat.receiver == currentuser" >
{{checkdate(chat.date)}}
<p class="chat-date" id="abc" #abc>{{msgdate | amDateFormat:'LL'}}</p>

</div>


Here is my checkdate function:

checkdate(date)
{
var res = date.split(" ");
var A=res[0];
var local=localStorage.getItem('chatdate');
this.msgdate="";
if(local === undefined || local === null)
{
this.msgdate=A;
localStorage.setItem('chatdate',this.msgdate);

}
else if(local !== undefined)
{
console.log(local != A);
if(local != A)
{

this.msgdate = A;
localStorage.setItem('chatdate',this.msgdate);
}
}

}

callFunction(){
this.content.scrollToBottom(0)
}


It's working. But I'm getting this error:

FIREBASE WARNING: Exception was thrown by user callback. Error: Expression has changed after it was checked. Previous value: 'April 10, 2017'. Current value: ''.
​

Because, I got this working by having these lines in my code:

import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'page-chat',
templateUrl: 'chat.html',

})


Now, I am getting no err msg. But the content does not display.

I consoled the chat value. It's working fine. But it doesn't not display any value.

At the same time, when I go to back button, content does display onesec.

If I remove the ChangeDetectionStrategy,

Again I getting this error message:

FIREBASE WARNING: Exception was thrown by user callback. Error: Expression has changed after it was checked. Previous value: 'April 10, 2017'. Current value: ''.
​

Why do I need to use ChangeDetectionStrategy? UI values does not display.

Continue reading...