Use OnPush change detection strategy

master
Kevin C. Coram 2020-01-08 21:33:38 -05:00
parent b7870b607b
commit 8802b52e54
Signed by: kevin
GPG Key ID: 0342351B3D61AD35
4 changed files with 40 additions and 26 deletions

View File

@ -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 { FormArray } from '@angular/forms';
import { Address } from '@nested-forms/contact'; import { Address } from '@nested-forms/contact';
import { AddressComponent } from '../address/address.component'; import { AddressComponent } from '../address/address.component';
@ -6,7 +11,8 @@ import { AddressComponent } from '../address/address.component';
@Component({ @Component({
selector: 'nested-forms-address-list', selector: 'nested-forms-address-list',
templateUrl: './address-list.component.html', templateUrl: './address-list.component.html',
styleUrls: ['./address-list.component.css'] styleUrls: ['./address-list.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class AddressListComponent implements OnInit { export class AddressListComponent implements OnInit {
@Input() addressArray: FormArray; @Input() addressArray: FormArray;
@ -25,7 +31,5 @@ export class AddressListComponent implements OnInit {
constructor() {} constructor() {}
ngOnInit() { ngOnInit() {}
}
} }

View File

@ -1,11 +1,17 @@
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'; import { Address } from '@nested-forms/contact';
@Component({ @Component({
selector: 'nested-forms-address', selector: 'nested-forms-address',
templateUrl: './address.component.html', templateUrl: './address.component.html',
styleUrls: ['./address.component.css'] styleUrls: ['./address.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class AddressComponent implements OnInit { export class AddressComponent implements OnInit {
@Input() addressGroup: FormGroup; @Input() addressGroup: FormGroup;
@ -22,7 +28,5 @@ export class AddressComponent implements OnInit {
constructor() {} constructor() {}
ngOnInit() { ngOnInit() {}
}
} }

View File

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

View File

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