Here, I collected a list of practices that will help us boost the performance of our Angular applications.

1. ChangeDetectionStrategy.OnPush

Change detection is one of the most common features found in JS and its frameworks. This is the ability to detect when the user’s data have changed or altered then, update the DOM to reflect the changes.Angular utilized Zone.js to monkey-patch each asynchronous event, so whenever any event occurs Angular runs change detection over its component tree.Now, this would very easily lead to low performance if the CD runs when the data hasn’t deeply changed but has referentially changed. How? What is deeply changed?Components have inputs they use to receive data from their parent components. When an async event occurs, Angular parses the component tree and checks the input for any difference from its previous value. This checking for any differences is done via the strict equality operator. This operator checks for reference change in the component’s inputs, that’s a new memory allocation was done for the input’s current values.With this Angular brought change detection strategies: Default and OnPush.This OnPush change detection strategy disables CD to be run on a component and its children. When the app bootstraps, Angular runs CD on the OnPush component and disables it. On subsequent CD runs, the OnPush component is skipped along with its children components in the subtree.CD will be run on the OnPush component only if the inputs have referentially changed.

2. Detaching the Change Detector

Every component in an Angular project tree has a change detector. We can inject this change detector (ChangeDetectorRef) to either detach the component from the CD tree or attach it to the CD tree. So, when Angular run CD on the component tree, the component with its sub-tree will be skipped.This is done by the use of the ChangeDetectorRef class.

export abstract class ChangeDetectorRef {
  abstract markForCheck(): void;

  abstract detach(): void;
  abstract detectChanges(): void;
  abstract checkNoChanges(): void;
  abstract reattach(): void;
}

See the methods:markForCheck: When a view uses the OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again. Components are normally marked as dirty (in need of rerendering) when inputs have changed or events have fired in the view. Call this method to ensure that a component is checked even if these triggers have not occurred.detach: Detaches this view from the change-detection tree. A detached view is not checked until it is reattached. Use in combination with detectChanges() to implement local change detection checks. Detached views are not checked during change detection runs until they are re-attached, even if they are marked as dirty. detachdetectChanges: Checks this view and its children. Use in combination with detach to implement local change detection checks.checkNoChanges: Checks the change detector and its children, and throws if any changes are detected. Use in development mode to verify that running change detection doesn’t introduce other changes.reattach: Re-attaches the previously detached view to the change detection tree. Views are attached to the tree by default.Example, we have this component:

@Compoennt({
    ...
})
class TestComponent {
    constructor(private changeDetectorRef: ChangeDetectorRef) {
        chnageDetectorRef.detach()
    }
}

We called the detach from the constructor because that’s the initialization point so the component is detached from the component tree at startup. CD runs on the entire component tree won’t affect TestComponent. If we change a template-bound data in the component, we need to reattach the component, so the DOM is updated on the next CD run.This does that:

@Component({
    ...
    template: `<div>{{data}}</div>`
})
class TestComponent {
    data = 0
    constructor(private changeDetectorRef: ChangeDetectorRef) {
        changeDetectorRef.detach()
    }
    clickHandler() {
        changeDetectorRef.reattach()
        data ++
    }
}

#angular