Angular Push Pipe, Tutorial, Usage, Performance, Zone Less

Angular Push Pipe, Tutorial, Usage, Performance, Zone Less

The main idea behind the push pipe is a new way of handling change detection. If all values are transported over Observables we know exactly when a value changes and could trigger the change detection.

The push pipe implementation#

The main idea behind the push pipe is a new way of handling change detection.

If all values are transported over Observables we know exactly when a value changes and could trigger the change detection.

Even more, we could trigger it only in the needed parts of our application.

In Angular's ViewEngine there are 2 options to render content:

markForCheck

detectChanges

markForCheck marks the related component as dirty and the next change detection of zone.js will trigger the rendering.

In comparison, detectChanges triggers the change detection immediately whether or not_ zone.js_ is present.

Ivy equivalents are:

- ╔ÁdetectChanges

- ╔ÁmarkDirty

As the push pipe should serve as a drop-in replacement for the async pipe, used in Angular v8, v9, and v10 we had to implement only a little change in the pipes code.

Switching from

tap(v => { this.value = v; this.ref.markForCheck(); })
<>

to

tap(v => { this.value = v; this.ref.detectChanges(); })
<>

With that in place we can already run Angular without zone.js.

If we would use it a bit and count the number of change detections we realize that multiple render calls are done for a single change.

A naive example could look like this:

@Component({
selector: 'app-display',
template: `
  {{observable$ | push}}
`
})
export class DisplayComponent {
  observable$ = of(1, 2, 3);
}

angular rxjs change-detection push-pipe reactive-programming push pipe

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

New possibilities with Angulars rendering and the push pipe - Part 1

The main idea behind the push pipe is a new way of handling change detection locally instead of the global handling used in async pipe by Angular natively. It is implemented in a way we can get zone-less performance in zone-full applications.

Simplifying Angular Change Detection

Change Detection is the backbone of the Angular framework, and each component has its own change detector. This article explains change detection strategies and optimizations to help you write highly performant Angular applications.

Angular Rxjs essential operators

Every web developer knows the complexity of working with reactive programming, asynchronous codes, callbacks, and promises. Luckily, Rxjs

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.