I noticed some major performance issues in my ionic project, so i checked what was going on, and found out that my *ngIf is triggered every time i click somewhere or the window is resized. I setup a new clean ionic project and it also seems to happen there. I re-created the same scenario in a blank angular project without ionic, and it doesn’t happen there, so it might be an ionic-only issue.
Sample Code:
app.component.html
<div *ngIf="test()"></div>
app.component.ts:
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
test(){
console.log('change');
}
}
This is the browsers output, notice that the log message was called 180+ times after resizing the window…
What is the issue here? Is it a bug? Is it expected behavior? It doesn’t seem to happen in a blank angular project.
I read some things about using changeDetection with OnPush, but then my Observables and BehaviorSubjects from my Services aren’t working anymore
Ionic Version:
Ionic CLI : 5.0.0 (C:\Users\admin\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1
// EDIT:
I think i fixed it by using ChangeDetection: OnPush, and in my services i only used BehaviorSubject without Observables. But i still want to know why this is default behavior in ionic…