- "contents": "\n\n\n <div class=\"github-links\">\n <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component/push.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n </div>\n\n\n<div class=\"content\">\n<h1 id=\"push-pipe\">Push Pipe<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component/push#push-pipe\"><i class=\"material-icons\">link</i></a></h1>\n<p>The <code><a href=\"api/component/PushPipe\" class=\"code-anchor\">ngrxPush</a></code> pipe serves as a drop-in replacement for the <code>async</code> pipe.\nIt contains intelligent handling of change detection to enable us\nrunning in zone-full as well as zone-less mode without any changes to the code.</p>\n<h2 id=\"usage\">Usage<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component/push#usage\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <code><a href=\"api/component/PushPipe\" class=\"code-anchor\">ngrxPush</a></code> pipe is a standalone pipe.\nTo use it, add the <code><a href=\"api/component/PushPipe\" class=\"code-anchor\">PushPipe</a></code> to the <code>imports</code> of your standalone component or NgModule:</p>\n<code-example language=\"ts\">\n<a href=\"api/store-devtools/DevToolsFeatureOptions#import\" class=\"code-anchor\">import</a> { Component } from '@angular/core';\n<a href=\"api/store-devtools/DevToolsFeatureOptions#import\" class=\"code-anchor\">import</a> { <a href=\"api/component/PushPipe\" class=\"code-anchor\">PushPipe</a> } from '@ngrx/component';\n\n@Component({\n // ... other <a href=\"api/data/EntityDefinition#metadata\" class=\"code-anchor\">metadata</a>\n standalone: true,\n imports: [\n // ... other imports\n <a href=\"api/component/PushPipe\" class=\"code-anchor\">PushPipe</a>,\n ],\n})\n<a href=\"api/store-devtools/DevToolsFeatureOptions#export\" class=\"code-anchor\">export</a> class MyStandaloneComponent {}\n</code-example>\n<h2 id=\"comparison-with-async-pipe\">Comparison with <code>async</code> Pipe<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component/push#comparison-with-async-pipe\"><i class=\"material-icons\">link</i></a></h2>\n<p>The current way of binding an observable to the view looks like this:</p>\n<code-example language=\"html\">\n<p>{{ number$ | async }}</p>\n\n<ng-container *ngIf=\"number$ | async as n\">{{ n }}</ng-container>\n\n<app-number [number]=\"number$ | async\"></app-number>\n</code-example>\n<p>The <code>async</code> pipe marks the component and all its ancestors as dirty, but does not trigger the change detection mechanism.\nIt needs the <code>zone.js</code> microtask queue to exhaust until <code>ApplicationRef.tick</code> is called to render all dirty marked components.\nTo use the <code>async</code> pipe in zone-less mode, we have to manually trigger the change detection each time an observable\nemits a new value.</p>\n<p>Fortunately, the <code><a href=\"api/component/PushPipe\" class=\"code-anchor\">ngrxPush</a></code> pipe solves this problem by scheduling a new change detection cycle in zone-less mode when\nan observable emits a new value. It can be used as follows:</p>\n<code-example language=\"html\">\n<p>{{ number$ | <a href=\"api/component/PushPipe\" class=\"code-anchor\">ngrxPush</a> }}</p>\n\n<ng-container *ngIf=\"number$ | <a href=\"api/component/PushPipe\" class=\"code-anchor\">ngrxPush</a> as n\">{{ n }}</ng-container>\n\n<app-number [number]=\"number$ | <a href=\"api/component/PushPipe\" class=\"code-anchor\">ngrxPush</a>\"></app-number>\n</code-example>\n<h2 id=\"combining-multiple-observables\">Combining Multiple Observables<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component/push#combining-multiple-observables\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <code><a href=\"api/component/PushPipe\" class=\"code-anchor\">ngrxPush</a></code> pipe can be also used with a dictionary of observables in the\nfollowing way:</p>\n<code-example language=\"html\">\n<code>\n {{ { users: users$, query: query$ } | ngrxPush | json }}\n</code>\n</code-example>\n<h2 id=\"included-features\">Included Features<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component/push#included-features\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>Takes observables or promises, retrieves their values, and passes the value to the template.</li>\n<li>Allows combining multiple observables in the template.</li>\n<li>Handles <code>null</code> and <code>undefined</code> values in a clean unified/structured way.</li>\n<li>Triggers change detection using the <code><a href=\"api/component/RenderScheduler\" class=\"code-anchor\">RenderScheduler</a></code> that behaves differently in\nzone-full and zone-less mode.</li>\n<li>Distinct the same values in a row for better performance.</li>\n</ul>\n\n</div>\n\n<!-- links to this doc:\n - guide/component\n - guide/component-store/usage\n-->\n<!-- links from this doc:\n - api/component/PushPipe\n - api/component/RenderScheduler\n - api/data/EntityDefinition#metadata\n - api/store-devtools/DevToolsFeatureOptions#export\n - api/store-devtools/DevToolsFeatureOptions#import\n - guide/component/push#combining-multiple-observables\n - guide/component/push#comparison-with-async-pipe\n - guide/component/push#included-features\n - guide/component/push#push-pipe\n - guide/component/push#usage\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component/push.md?message=docs%3A%20describe%20your%20change...\n-->"
0 commit comments