Nascent Prototype Metaverse

    @nowzoo/ngx-fire
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.11 • Public • Published

    @nowzoo/ngx-fire

    Directives for binding Angular Reactive form controls and arrays to Firebase references.

    Demo Site | Demo Code

    Install

    npm i @nowzoo/ngx-fire --save

    This library depends upon Firebase and the Angular Reactive Forms module. It's up to you how you create Firebase references: a good option is angularfire2.

    Quick Start

    Import NgxFireModule and ReactiveFormsModule.

    import { ReactiveFormsModule } from '@angular/forms';
    import { NgxFireModule } from '@nowzoo/ngx-fire';
    // other imports...
    
    @NgModule({
      imports: [
        ReactiveFormsModule,
        NgxFireModule,
        // etc..
      ]
    
    })
    export class SomeModule { }

    Bind a control with [ngxFireControl]="ref"...

    <input
      type="text"
      class="form-control"
      placeholder="How's it going?"
      [formControl]="control"
      [ngxFireControl]="ref"
      #fc="ngxFireControl"
      debounce="1000"
      (blur)="fc.save()">

    Bind a numerically indexed array with [ngxFireArray]="ref"...

    <div formArrayName="tags" [ngxFireArray]="ref" #tagsFa="ngxFireArray">
    ....
    </div>

    See the demos for concrete examples.

    API

    NgxFireControlDirective

    Binds a FormControl to a reference. Must be used in conjunction with FormControlDirective ([formControl]="ctl") or FormControlName (formControlName="myName".)

    selector: [ngxFireControl] exportAs: ngxFireControl

    Inputs

    • ngxFireControl: Reference Required.
    • debounce: number Optional. Default: 0. The amount of time in milliseconds to debounce form control changes before saving. Useful for text controls.
    • trim: boolean Optional. Default: true. If true, and if the control value is a string, the value will be trimmed before saving.

    Methods

    • save(): void Saves the current control value to the database. Rejects if the control is not valid or if there is a Firebase error.

    Properties

    • error: Observable<Error> Populated if the Firebase ref throws an error either reading or writing.
    • saving: Observable<boolean> True if the control value is being saved to the database.
    • value: Observable<any> The current database value.
    • ref: Reference The reference you passed in via ngxFireControl

    NgxFireArrayDirective

    Binds a FormArray to a reference. Must be used in conjunction with FormArrayName (formArrayName="myName".)

    selector: [ngxFireArray] exportAs: ngxFireArray

    Inputs

    • ngxFireArray: Reference Required.
    • controlFactory: () => FormControl|FormGroup Optional. A function that returns a group or control for each element of the array. By default this is a function that returns a FormControl with the required validator. Note that you should only pass an empty group or control: the value is set from the database.

    Methods

    • push(value: any): void Pushes value to the end of the array and saves to the database.
    • remove(i: number): void Removes the element at i and saves the array to the database.
    • move(from: number, to: number): void Moves the element at from to to and saves the array to the database.

    Properties

    • error: Observable<Error> Populated if the Firebase ref throws an error either reading or writing.
    • saving: Observable<boolean> True if the array value is being saved to the database, i.e. when pushing, removing or moving.
    • value: Observable<any> The current database value.
    • ref: Reference The reference you passed in via ngxFireArray
    • addControl An unattached FormGroup or FormControl, created with controlFactory() that you can use to push new elements to the array.
    • length: number The length of the FormArray.
    • controls: (FormGroup|FormControl)[] The child controls.

    Contributing

    Contributions and suggestions are welcome.

    Get started...

    git clone git@github.com:nowzoo/ngx.git
    cd ngx
    npm i
    ng build ngx-fire --prod

    The library code is found in projects/ngx-fire.

    The demo site code is in src/app/ngx-fire.

    This library was built with the Angular CLI, so...

    # test the library...
    ng test ngx-fire
    
    # build the library...
    ng build ngx-fire --prod
    
    # serve the demo site locally...
    ng serve

    Note that changes to the library code are not automatically reflected in the locally-served demo site. You must run ng build ngx-fire whenever you make changes to the library. But the local server does watch for changes to the built library -- so you don't need to restart the server.

    If you use Wallaby to run unit tests, select the projects/ngx-fire/wallaby.js as your config file.

    License

    MIT

    Install

    npm i @nowzoo/ngx-fire

    DownloadsWeekly Downloads

    18

    Version

    0.0.11

    License

    MIT

    Unpacked Size

    303 kB

    Total Files

    27

    Last publish

    Collaborators

    • chriscarson