update

Author: valerisuleo

home_work/reactive-form-advanced/.editorconfig renamed to advanced-topic/changeDetection/.editorconfig

@@ -0,0 +1,159 @@
+# ChangeDetection
+
+## Immutable Objects
+
+In this example we have 2 components: 
+
+1. parent
+
+	```
+	export class ParentComponent implements OnInit {
+	
+	    data = { counter: 0 };
+	
+	    constructor() { }
+	
+	    increment() {
+	         this.data.counter++;
+		    }
+	
+	    ngOnInit(): void {
+	    }
+	
+	}
+	
+	<!--html-->
+	
+	<button (click)="increment()">increment</button>
+	<hr>
+	<app-counter [data]='data'></app-counter>
+	
+	```
+
+2. child
+
+	```
+	export class CounterComponent implements OnChanges {
+	
+	    @Input() data;
+	
+	    constructor() { }
+	
+	    ngOnChanges(change: SimpleChanges): void {
+	        console.log('counter', change);
+	        // at the moment ngOnchanges is not triggered!
+	    }
+	    
+	    <!--html-->
+	    
+	     {{ data.counter }}
+	```
+
+What wanto to use now *immutable objects* to speed up the change detection process that angular runs behind the curtains in order to keep the DOM in sync.
+
+More specific we want to tell angular to update the `counter` component only when the **obj.reference** changes and not when a property within that obj.changes. Obviously this will increase the performance of our app.
+
+> Keep in mind that so far `ngOnChanges` is not triggered. To make it work we need to change the obj reference!
+
+So first in our ChildComponent:
+
+```
+   @Component({
+    selector: 'app-counter',
+    templateUrl: './counter.component.html',
+    styleUrls: ['./counter.component.scss'],
+    
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+```
+
+> **OnPush strategy**:
+> 
+> When a component is marked with `changeDetection: ChangeDetectionStrategy.OnPush`, angular will assume that the input object did not change if the object reference did not change. Meaning that changing a property won't trigger change detection. Thus the view will be out of sync with the model.
+
+In order to update the view we need to use **immutable objs.** in our parent component:
+
+```
+increment() {
+    const clone = { ...this.data };
+    clone.counter++;
+    this.data = clone;
+}
+```
+
+Now it works and we can log the `change` inside `ngOnChanges`.
+
+
+## Observables and ChangeDetectorRef
+
+Now rather than pass the data directly we wanna pass it into an `Observable` this time.
+
+1. ParentComponent
+
+	```
+	export class ParentComponentCdr implements OnInit {
+	
+	    _counter = 0;
+	    data$ = new BehaviorSubject({ counter: 0 });
+	
+	    constructor() { }
+	
+	    increment() {
+	        this._counter++
+	        this.data$.next({ counter: this._counter });
+	    }
+	```
+
+2. ChildComponent
+
+	```
+	   @Input() data: Observable<any>;
+	    _data;
+	
+	    ngOnInit() {
+	        this.data.subscribe((value) => {
+	            this._data = value;
+	        });
+	    }
+	```
+	
+	> The view is still not updated. How come?
+	
+	Observable never change their reference.
+	
+	> How can we fix it?
+	
+	```
+	    constructor(private cdr: ChangeDetectorRef) { }
+	
+	    ngOnInit() {
+	        this.data.subscribe((value) => {
+	            this._data = value;
+	            this.cdr.markForCheck();
+	        });
+	    }
+	```
+
+### What's the difference between `markForCheck()` and `detectChanges()` ?
+
+- `cdr.detectChanges()` will run change detection immediately from the current component down through its descendants.
+
+- `cdr.markForCheck()` will not run change detection, but mark its ancestors as needing to run change detection. Next time change detection runs anywhere, it will run also for those components which were marked.
+
+#### When should we use it?
+
+
+- Use `detectChanges()` when you've updated the model after angular has run it's change detection, or if the update hasn't been in angular world at all.
+
+- Use `markForCheck()` if you're using `OnPush` and you're bypassing the ChangeDetectionStrategy by mutating some data or you've updated the model inside a setTimeout;
+
+
+
+
+
+
+
+
+
+

home_work/reactive-form-advanced/.gitignore renamed to advanced-topic/changeDetection/.gitignore

@@ -0,0 +1,128 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "changeDetection": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/changeDetection",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "changeDetection:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "changeDetection:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "changeDetection:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "changeDetection:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "changeDetection:serve:production"
+            }
+          }
+        }
+      }
+    }},
+  "defaultProject": "changeDetection"
+}

advanced-topic/changeDetection/README.md

@@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('changeDetection app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});

advanced-topic/changeDetection/angular.json

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/changeDetection'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};