performance: all - enable ChangeDetectionStrategy.OnPush wherever possible

[christophercr]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[X] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/NationalBankBelgium/stark/blob/master/CONTRIBUTING.md#got-a-question-or-problem

Current behavior

Angular runs a lot of change detection cycles whenever something happens in the UI in order to know whether the view should be updated ('dirty checking"). This means that the app could get serious performance issues if there are a lot of components and Angular runs the dirty checking for each of them.

Expected behavior

Dumb components (those that just rely in their inputs) should use the ChangeDetectionStrategy.OnPush so that Angular just runs the dirty checking in very specific cases or when it is triggered manually.

This will reduce the amount of checks automatically executed by Angular and ultimately improve the performance of the App.

See A Comprehensive Guide to Angular onPush Change Detection Strategy

Minimal reproduction of the problem with instructions

In Showcase:

1. refactor the ExampleViewerComponent and implement a setter and getter for the exampleTitle input and add a console.log in the getter:

@Input()
public get exampleTitle(): string {
	console.log("==> exampleTitle GETTER");
	return this._exampleTitle;
}
public set exampleTitle(value: string) {
	this._exampleTitle = value;
}

private _exampleTitle = "undefined";

2. run the Showcase app and navigate to any of the demo pages where the ExampleViewerComponent is used.
3. open the browser console. The message ==> exampleTitle GETTER is logged multiple times as you interact with the UI (mouse hover, click, etc). This is because Angular checks this property for changes in order to refresh the template if needed.

In stark-ui:

1. refactor the StarkAppLogoutComponent and implement a setter and getter for the icon input and add a console.log in the getter:

@Input()
public get icon(): "power" | string {
	console.log("==> icon GETTER");
	return this._icon;
}
public set icon(value: "power" | string) {
	this._icon = value;
}
	
private _icon: "power" | string = "power";

2. update the stark-ui dependency in the Showcase to take the changes done in the previous step.
3. run the Showcase app.
4. open the browser console. The message ==> icon GETTER is logged multiple times as you interact with the UI (mouse hover, click, etc) and also when you navigate to any page in the app. This is because Angular checks this property for changes in order to refresh the template if needed.

What is the motivation / use case for changing the behavior?

Performant components/apps.

Environment

Stark version: 10.0.0-beta.8