@s-libs/ng-app-state

Painlessly integrate app-state into template-driven Angular forms.

Installation

Install along with its peer dependencies using:

npm install --save @s-libs/ng-app-state @s-libs/app-state @s-libs/ng-core @s-libs/rxjs-core @s-libs/js-core @s-libs/micro-dash

# OR

yarn add @s-libs/ng-app-state @s-libs/app-state @s-libs/ng-core @s-libs/rxjs-core @s-libs/js-core @s-libs/micro-dash

Setup

In your module, import NasModelModule, e.g.:

// app.module.ts

import { NasModelModule } from "@s-libs/ng-app-state";

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

Template Driven Forms

This library includes the [nasModel] directive that you can use in place of [(ngModel)] to bind form controls directly to store objects. For example, to edit the current user's name in the example above:

@Component({
  template: `<input [nasModel]="nameStore" />`,
})
class AccountSettingsComponent {
  nameStore: Store<string>;

  constructor(myStore: MyStore) {
    this.nameStore = myStore("currentUser")("name");
  }
}

[nasModel] is tested to work with all standard form controls. Except where noted, they all bind to Store<string> objects.

• <input type="checkbox"> - binds to Store<boolean>
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="month">
• <input type="number"> - binds to Store<number>
• <input type="password">
• <input type="radio">
• <input type="range"> - binds to Store<number>
• <input type="search">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
• <input>
• <select multiple> - binds to Store<string[]>
• <select>
• <textarea>

Changelog

11.1.0 (2020-11-27)

Features

• app-state: spreadArrayStore$() handles null and undefined (16e0dce), closes #4
• app-state: spreadObjectStore$() handles null and undefined (c15b653)
• js-core: add Constructor type to support the mixin pattern (f39a6b9)
• micro-dash: improve the typing of omit() (48d267b)
• micro-dash: improve the typing of omitBy() (a2c4280)
• micro-dash: improve the typing of pick() (ecedb2e)
• micro-dash: improve the typing of pickBy() (bcf1824)
• micro-dash: reduce size of isBoolean() (a57466a)
• ng-core: add mixInInjectableSuperclass() (e3cacf8)
• rxjs-core: mapAndCacheArrayElements() handles null and undefined (7d19f47)
• rxjs-core: mapAndCacheObjectElements() handles null and undefined (7829d6b)
• rxjs-core: add mixInSubscriptionManager() (c173fa5)
• add support for all libraries to be consumed as UMD bundles (8e9bec9), closes #7