Use OnPush change detection strategy

apps/static-factory-methods/src/app/address-list/address-list.component.ts

@@ -1,4 +1,9 @@
-import { Component, Input, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
 import { FormArray } from '@angular/forms';
 import { Address } from '@nested-forms/contact';
 import { AddressComponent } from '../address/address.component';
@@ -6,7 +11,8 @@ import { AddressComponent } from '../address/address.component';
 @Component({
   selector: 'nested-forms-address-list',
   templateUrl: './address-list.component.html',
-  styleUrls: ['./address-list.component.css']
+  styleUrls: ['./address-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddressListComponent implements OnInit {
   @Input() addressArray: FormArray;
@@ -23,9 +29,7 @@ export class AddressListComponent implements OnInit {
     return list;
   }
 
-  constructor() { }
+  constructor() {}
-
-  ngOnInit() {
-  }
 
+  ngOnInit() {}
 }

apps/static-factory-methods/src/app/address/address.component.ts

@@ -1,15 +1,21 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {
-import { FormGroup, FormControl } from '@angular/forms';
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { Address } from '@nested-forms/contact';
 
 @Component({
   selector: 'nested-forms-address',
   templateUrl: './address.component.html',
-  styleUrls: ['./address.component.css']
+  styleUrls: ['./address.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddressComponent implements OnInit {
   @Input() addressGroup: FormGroup;
-  
+
   static buildForm(addr: Address): FormGroup {
     return new FormGroup({
       line1: new FormControl(addr ? addr.line1 : ''),
@@ -20,9 +26,7 @@ export class AddressComponent implements OnInit {
     });
   }
 
-  constructor() { }
+  constructor() {}
-
-  ngOnInit() {
-  }
 
+  ngOnInit() {}
 }

apps/static-factory-methods/src/app/app.component.ts

@@ -1,17 +1,20 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
 import {
-  Contact,
+  ChangeDetectionStrategy,
-  ContactService,
+  Component,
-} from '@nested-forms/contact';
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Contact, ContactService } from '@nested-forms/contact';
 import { Subscription } from 'rxjs';
-import { NameComponent } from './name/name.component';
 import { AddressListComponent } from './address-list/address-list.component';
+import { NameComponent } from './name/name.component';
 
 @Component({
   selector: 'nested-forms-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit, OnDestroy {
   contact: Contact;
@@ -19,10 +22,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
   private subscription: Subscription;
 
-  constructor(
+  constructor(private service: ContactService, private fb: FormBuilder) {}
-    private service: ContactService,
-    private fb: FormBuilder,
-  ) {}
 
   public ngOnInit() {
     this.subscription = this.service

apps/static-factory-methods/src/app/name/name.component.ts

@@ -1,11 +1,17 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { Component, OnInit, Input } from '@angular/core';
 import { Name } from '@nested-forms/contact';
 
 @Component({
   selector: 'nested-forms-name',
   templateUrl: './name.component.html',
-  styleUrls: ['./name.component.css']
+  styleUrls: ['./name.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NameComponent implements OnInit {
   @Input() nameGroup: FormGroup;