npm i -S @ngrx-utils/store
# or
yarn add @ngrx-utils/storeThis directive will give you ability to add a class to the element when router url match a regular expression. The syntax is same with ngClass but replace the true/false expression with your string based regexp (like the string you pass to new RegExp('')).
Example: active-class will be added to a tag when router URL contains this segment: products/12345
<a routerLink="/products"
[routerLinkMatch]="{
"active-class": "products/\\d+"
}"></a>This is a modified version of async pipe in @angular/common package. All the code implement are almost the same but this push pipe will call detectChanges() instead of markForCheck() so your pipe continue to work even in {ngZone: 'noop'} environment.
// main.ts
platformBrowserDynamic()
.bootstrapModule(AppModule, { ngZone: 'noop' })
.catch((err) => console.log(err));
// app.module.ts
import { PushPipeModule } from '@ngrx-utils/store';
@NgModule({
imports: [PushPipeModule],
})
export class AppModule {}
// heavy-compute.component.ts
import { Component, OnInit, NgZone } from '@angular/core';
@Component({
template: `<h2>Test: {{ test$ | push }}</h2>`,
})
export class HeavyComputeComponent implements OnInit {
compute() {
//...heavy computing
}
ngOnInit() {
this.compute();
}
}We often use *ngIf="stream$ | async as stream" to subscribe to an observable property and rename it to a template variable. But with nested template, *ngIf might remove your template which may not be expected.
import { NgLetModule } from '@ngrx-utils/store';
@NgModule({
imports: [NgLetModule],
})
export class FeatureModule {}Replace *ngIf with *ngLet:
<ng-container *ngLet="(filterDate$ | async) as filterDate">
<pick-date
[registeredAt]="(device$ | async)?.registeredAt"
[firstDate]="filterDate?.from"
[secondDate]="filterDate?.to"
></pick-date>
</ng-container>*ngLet just hold a reference to the result of async pipe in a template variable and don't have any special logic like structure directives such as *ngIf or *ngFor so it run faster and very handy.
You can also subscribe to multiple observable separately with *ngLet like this:
<ng-container
*ngLet="{
device: device$ | async,
date: filterDate$ | async
} as options"
>
<pick-date
[registeredAt]="options.device?.registeredAt"
[firstDate]="options.date?.from"
[secondDate]="options.date?.to"
></pick-date>
</ng-container>Actually this is an feature request in angular for quite long time as described in here but not yet been accepted.
Have you ever feel odd when have to repeat calling unsubscribe with subscriptions in ngOnDestroy, or creating a Subject property, add takeUntil() to subscription, call next() in ngOnDestroy?
With untilDestroy pipeable operator:
import { untilDestroy } from '@ngrx-utils/store';
export class MyComponent implements OnDestroy {
user: User;
constructor(userService: UserService) {
userService
.getUsers()
/** Automatically unsubscribe on destroy */
.pipe(untilDestroy(this))
.subscribe((user) => (this.user = user));
}
/** Must have */
ngOnDestroy() {}
}NOTE: You still have to declare
ngOnDestroyin Component because Angular does not support dynamically add component method in AOT mode
Credit to @SanderElias, this operator is inspired from his idea but he's currently not publishing it as an npm package.
- Fork this repo
- Add your awesome feature and include it in the top level export
- Send a PR here and describe some use cases.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent