perf: Add OnPush change detection strategy on all components.

src/app/examples/authenticated/authenticated.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'anms-authenticated',
   templateUrl: './authenticated.component.html',
-  styleUrls: ['./authenticated.component.scss']
+  styleUrls: ['./authenticated.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AuthenticatedComponent implements OnInit {
   constructor() {}

src/app/examples/crud/components/crud.component.ts

@@ -1,5 +1,11 @@
 import { v4 as uuid } from 'uuid';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
 import { FormBuilder, NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
@@ -16,7 +22,8 @@ import { selectSelectedBook, selectAllBooks } from '../books.selectors';
 @Component({
   selector: 'anms-crud',
   templateUrl: './crud.component.html',
-  styleUrls: ['./crud.component.scss']
+  styleUrls: ['./crud.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CrudComponent implements OnInit, OnDestroy {
   private unsubscribe$: Subject<void> = new Subject<void>();
@@ -39,7 +46,8 @@ export class CrudComponent implements OnInit, OnDestroy {
   constructor(
     public store: Store<State>,
     public fb: FormBuilder,
-    private router: Router
+    private router: Router,
+    private cd: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -49,7 +57,10 @@ export class CrudComponent implements OnInit, OnDestroy {
         select(selectSelectedBook),
         takeUntil(this.unsubscribe$)
       )
-      .subscribe(book => (this.selectedBook = book));
+      .subscribe(book => {
+        this.selectedBook = book;
+        this.cd.markForCheck();
+      });
   }
 
   ngOnDestroy() {

src/app/examples/examples/examples.component.ts

@@ -1,5 +1,10 @@
 import { Store, select } from '@ngrx/store';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+  ChangeDetectionStrategy
+} from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { ActivationEnd, Router } from '@angular/router';
 import { Observable, Subject } from 'rxjs';
@@ -21,11 +26,12 @@ interface State extends BaseSettingsState, BaseExamplesState {}
   selector: 'anms-examples',
   templateUrl: './examples.component.html',
   styleUrls: ['./examples.component.scss'],
-  animations: [routeAnimations]
+  animations: [routeAnimations],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ExamplesComponent implements OnInit, OnDestroy {
   private unsubscribe$: Subject<void> = new Subject<void>();
-  private isAuthenticated$: Observable<boolean>;
+  isAuthenticated$: Observable<boolean>;
 
   examples = [
     { link: 'todos', label: 'anms.examples.menu.todos' },

src/app/examples/form/components/form.component.ts

@@ -1,4 +1,9 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy
+} from '@angular/core';
 import { Validators, FormBuilder } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 import { Subject } from 'rxjs';
@@ -16,7 +21,8 @@ import { NotificationService } from '@app/core/notifications/notification.servic
 @Component({
   selector: 'anms-form',
   templateUrl: './form.component.html',
-  styleUrls: ['./form.component.scss']
+  styleUrls: ['./form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FormComponent implements OnInit, OnDestroy {
   private unsubscribe$ = new Subject<void>();

src/app/examples/stock-market/components/stock-market-container.component.ts

@@ -1,33 +1,38 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
 import { Store, select } from '@ngrx/store';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { selectStockMarket } from '../stock-market.selectors';
 import { ActionStockMarketRetrieve } from '../stock-market.actions';
+import { StockMarketState } from '../stock-market.model';
 import { State } from '../../examples.state';
 
 @Component({
   selector: 'anms-stock-market',
   templateUrl: './stock-market-container.component.html',
-  styleUrls: ['./stock-market-container.component.scss']
+  styleUrls: ['./stock-market-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StockMarketContainerComponent implements OnInit, OnDestroy {
   private unsubscribe$: Subject<void> = new Subject<void>();
 
-  initialized;
-  stocks;
+  initialized: boolean;
+  stocks: StockMarketState;
 
-  constructor(public store: Store<State>) {}
+  constructor(public store: Store<State>, private cd: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.initialized = false;
     this.store
-      .pipe(
-        select(selectStockMarket),
-        takeUntil(this.unsubscribe$)
-      )
-      .subscribe((stocks: any) => {
+      .pipe(select(selectStockMarket), takeUntil(this.unsubscribe$))
+      .subscribe(stocks => {
         this.stocks = stocks;
 
         if (!this.initialized) {
@@ -36,6 +41,8 @@ export class StockMarketContainerComponent implements OnInit, OnDestroy {
             new ActionStockMarketRetrieve({ symbol: stocks.symbol })
           );
         }
+
+        this.cd.markForCheck();
       });
   }
 

src/app/examples/theming/child/child.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'anms-child',
   templateUrl: './child.component.html',
-  styleUrls: ['./child.component.scss']
+  styleUrls: ['./child.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ChildComponent implements OnInit {
   constructor() {}

src/app/examples/theming/parent/parent.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'anms-parent',
   templateUrl: './parent.component.html',
-  styleUrls: ['./parent.component.scss']
+  styleUrls: ['./parent.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ParentComponent implements OnInit {
   themeSrc: string = require('!raw-loader!./parent.component.scss-theme.scss');

src/app/examples/todos/components/todos-container.component.spec.ts

@@ -6,6 +6,7 @@ import {
   RenderResult,
   fireEvent
 } from '@angular-extensions/testing-library';
+import { MatCheckbox } from '@angular/material';
 
 import { MockStore, TestingModule } from '@testing/utils';
 
@@ -139,7 +140,7 @@ describe('TodosComponent', () => {
     );
   });
 
-  it('should disable remove done todos button if no todo is done', () => {
+  it('should disable remove done todos button if no todo is done', async () => {
     store.setState(
       createState({
         items: [{ id: '1', name: 'test 1', done: true }],

src/app/examples/todos/components/todos-container.component.ts

@@ -1,10 +1,17 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+  ChangeDetectionStrategy
+} from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { select, Store } from '@ngrx/store';
 import { Subject, Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
+import { NotificationService } from '@app/core/notifications/notification.service';
 
 import {
   ActionTodosAdd,
@@ -20,13 +27,12 @@ import {
 } from '../todos.selectors';
 import { Todo, TodosFilter } from '../todos.model';
 import { State } from '../../examples.state';
-import { TranslateService } from '@ngx-translate/core';
-import { NotificationService } from '@app/core/notifications/notification.service';
 
 @Component({
   selector: 'anms-todos',
   templateUrl: './todos-container.component.html',
-  styleUrls: ['./todos-container.component.scss']
+  styleUrls: ['./todos-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TodosContainerComponent implements OnInit, OnDestroy {
   private unsubscribe$: Subject<void> = new Subject<void>();

src/app/settings/components/settings-container.component.ts

@@ -1,4 +1,10 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
 import { Store, select } from '@ngrx/store';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -18,7 +24,8 @@ import { selectSettings } from '../settings.selectors';
 @Component({
   selector: 'anms-settings',
   templateUrl: './settings-container.component.html',
-  styleUrls: ['./settings-container.component.scss']
+  styleUrls: ['./settings-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SettingsContainerComponent implements OnInit, OnDestroy {
   private unsubscribe$: Subject<void> = new Subject<void>();
@@ -40,13 +47,16 @@ export class SettingsContainerComponent implements OnInit, OnDestroy {
     { value: 'pt-br', label: 'pt-br' }
   ];
 
-  constructor(private store: Store<{}>) {
+  constructor(private store: Store<{}>, private cd: ChangeDetectorRef) {
     store
       .pipe(
         select(selectSettings),
         takeUntil(this.unsubscribe$)
       )
-      .subscribe(settings => (this.settings = settings));
+      .subscribe(settings => {
+        this.settings = settings;
+        this.cd.markForCheck();
+      });
   }
 
   ngOnInit() {}

src/app/static/about/about.component.ts

@@ -1,11 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
 
 @Component({
   selector: 'anms-about',
   templateUrl: './about.component.html',
-  styleUrls: ['./about.component.scss']
+  styleUrls: ['./about.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AboutComponent implements OnInit {
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;

src/app/static/features/features.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
 
@@ -7,7 +7,8 @@ import { features } from './features.data';
 @Component({
   selector: 'anms-features',
   templateUrl: './features.component.html',
-  styleUrls: ['./features.component.scss']
+  styleUrls: ['./features.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FeaturesComponent implements OnInit {
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;