Skip to content
This repository has been archived by the owner on Mar 11, 2021. It is now read-only.
/ ngx-sherlock Public archive
forked from politie/ngx-sherlock

ngx-sherlock is an Angular tooling library to be used with the @politie/sherlock distributed reactive state management library.

License

Notifications You must be signed in to change notification settings

skunkteam/ngx-sherlock

 
 

Repository files navigation

Ngx Sherlock

Greenkeeper badge Coverage Status

NgxSherlock is a set of Angular bindings for the Sherlock reactive state management library.

Usage

Installation

Install NgxSherlock by running:

$ npm install @politie/ngx-sherlock

Add the NgxSherlockModule to your AppModule:

import { NgModule } from '@angular/core';
import { NgxSherlockModule } from '@politie/ngx-sherlock';

@NgModule({
    imports: [NgxSherlockModule],
    ...
})
export class AppModule { }

autoDetectChanges

Signature:

class AutoChangeDetectorService {
    init(): Promise<void>;
}

The AutoChangeDetectorService enables automatic change detection when using Sherlock Derivables, even when using the OnPush change-detection-strategy. The alternative is to use the value-pipe which is explained below. When using the AutoChangeDetectorService it is no longer needed to use the pipe.

The service needs to be instantiated once for each component. This is accomplished by mentioning it in the providers section of the Component metadata. It will detach the default ChangeDetector and re-enables change detection once #init() is called. This will ensure that change detection is wrapped with Sherlock magic.

The AutoChangeDetectorService service guarantees model and view fidelity, meaning one can easily use Angular's forms and template functionality.

Example

trusty-sidekick.component.ts:

import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
import { AutoChangeDetectorService } from '@politie/ngx-sherlock';
import { atom, Derivable } from '@politie/sherlock';

@Component({
    selector: 'trusty-sidekick',
    template: `
        <input type="text" [(ngModel)]="firstname$.value" placeholder="First name">
        <input type="text" [(ngModel)]="surname$.value" placeholder="Surname">
        <sidekick-greeter [name]="sidekick$"></sidekick-greeter>
    `,
    providers: [AutoChangeDetectorService],
})
export class TrustySidekickComponent {
    readonly sidekick$ = atom({ firstname: 'John', surname: 'Watson' });
    readonly firstname$ = this.sidekick$.pluck('firstname');
    readonly surname$ = this.sidekick$.pluck('surname');

    // Here we call AutoChangeDetectorService#init which will automatically react on changes in the state of
    // any used derivable.
    constructor(autoCD: AutoChangeDetectorService) { autoCD.init(); }
}

@Component({
    selector: 'sidekick-greeter',
    template: `
        <h2 *ngIf="!beObnoxious">Well hello there, {{ name.value.firstname }} {{ name.value.surname }}!</h2>
        <h2 *ngIf="beObnoxious">So good of you to finally join us, {{ name.value.surname }}...</h2>
        
        <button (click)="toggle()">Change mood</button>     
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [AutoChangeDetectorService],
})
export class SidekickGreeterComponent implements OnInit {
    @Input() name: Derivable<{ firstname: string, surname: string }>;
    obnoxious$ = atom(false);

    get beObnoxious() {
        return this.obnoxious$.get();
    }

    constructor(autoCD: AutoChangeDetectorService) { autoCD.init(); }

    toggle() {
        this.obnoxious$.swap(mood => !mood);
    }
}

ValuePipe

The ValuePipe unwraps a Derivable or DerivableProxy value and triggers the ChangeDetectorRef whenever an internal value changes and a change detection cycle is needed. This allows a component to have an OnPush ChangeDetectionStrategy, greatly increasing performance.

Example

my.component.html:

<h1>My awesome counter</h1>
<p>We're already at: <strong>{{ counter$ | value }}</strong></p>

my.component.ts:

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { atom } from '@politie/sherlock';

@Component({
    selector: 'my-component';
    templateUrl: 'my.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent implements OnInit {
    readonly counter$ = atom(0);

    ngOnInit() {
        setInterval(() => this.counter$.swap(i => i++), 1000);
    }
}

About

ngx-sherlock is an Angular tooling library to be used with the @politie/sherlock distributed reactive state management library.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 86.1%
  • JavaScript 9.3%
  • HTML 4.4%
  • CSS 0.2%