Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

@s-libs/ng-app-state

Package Overview
Dependencies
1
Maintainers
1
Versions
36
Issues
File Explorer

Advanced tools

@s-libs/ng-app-state

Painlessly integrate [`app-state`](https://github.com/simontonsoftware/s-libs/projects/app-state) into template-driven Angular forms.

    15.2.0latest
    GitHub

Version published
Maintainers
1
Weekly downloads
757
increased by2.71%

Weekly downloads

Changelog

Source

15.2.0 (2023-03-18)

Features

  • ng-core: add LazyLoader (d157ec6)
  • ng-dev: ComponentContext supports standalone components (92eae17)
  • ng-mat-core: SlDialogService is now provided in SlDialogModule instead of root, to be more friendly for lazy loading. (6450155)

Bug Fixes

  • ng-dev: AngularContext cleans up after itself even better in error situations, to avoid all future tests failing "There is already another AngularContext in use (or it was not cleaned up)" (f208815)
  • ng-mat-core: support "fab" and "icon-button" when specifying specific modules to theme (0b6bc02)

Readme

Source

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>

FAQs

Last updated on 18 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc