# @ngneat/bind-query-params-patch
> Sync URL Query Params with Angular Form Controls
Latest version **1.0.3** (published 2021-11-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install @ngneat/bind-query-params-patch
pnpm add @ngneat/bind-query-params-patch
yarn add @ngneat/bind-query-params-patch
bun add @ngneat/bind-query-params-patch
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-11-25 |
| First published | 2021-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 181 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Netanel Basal |
| Maintainers | netanel-ngneat, itayod, shahar.kazaz |
| Keywords | angular, angular 2, bind-query-params, query params, sync query params to angular forms, angular forms to query params, query params to angular forms |
## Links
- npm: https://www.npmjs.com/package/@ngneat/bind-query-params-patch
- Repository: https://github.com/ngneat/bind-query-params
- Homepage: https://github.com/ngneat/bind-query-params#readme
- Issues: https://github.com/ngneat/bind-query-params/issue
- npm.io page: https://npm.io/package/@ngneat/bind-query-params-patch
## Dependencies (2)
- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [lodash.set](https://npm.io/package/lodash.set.md) 4.3.2
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.3 (latest) — 2021-11-25
- 1.0.2 — 2021-11-22
- 1.0.1 — 2021-11-21
- 1.0.0 — 2021-11-21
## README
[]()
[]()
[]()
[](https://github.com/prettier/prettier)
[](#contributors-)
[](https://github.com/ngneat/)
[]()
> Sync URL Query Params with Angular Form Controls
The library provides a simple and reusable solution for binding URL query params to Angular Forms
## Demo
## Installation
`npm install @ngneat/bind-query-params`
## Usage
Inject the `BindQueryParamsFactory` provider, pass an array of [definitions](#QueryParamDefinition) and `connect` it to your form:
```ts
import { BindQueryParamsFactory } from '@ngneat/bind-query-params';
interface Filters {
searchTerm: string;
someBoolean: boolean;
}
@Component({
template: `Your normal form setup`,
})
export class MyComponent {
filters = new FormGroup({
searchTerm: new FormControl(),
someBoolean: new FormControl(false),
});
bindQueryParamsManager = this.factory
.create([
{ queryKey: 'searchTerm' },
{ queryKey: 'someBoolean', type: 'boolean' }
]).connect(this.filters);
constructor(private factory: BindQueryParamsFactory) {}
ngOnDestroy() {
this.bindQueryParamsManager.destroy();
}
}
```
With this setup, the `manager` will take care of two things:
1. Update the `control`'s value when the page is loaded for the first time
2. Update the URL query parameter when the corresponding `control` value changes
## QueryParam Definition
### `queryKey`
The query parameter key
### `path`
The form control path. If it is not specified, the manager assumes that the `path` is the `queryKey`. We can also pass nested keys, for example, `person.name`:
```ts
{ queryKey: 'name', path: 'person.name' }
```
### `type`
Specify the control value type. Available options are:
`boolean`, `array`, `number`, `string` and `object`.
Before updating the control with the value, the manager will parse it based on the provided `type`.
### `parser`
Provide a custom parser. For example, the default `array` parser converts the value to an `array` of strings. If we need it to be an array of numbers, we can pass the following `parser`:
```ts
const def = { parser: (value) => value.split(',').map((v) => +v) };
```
### `serializer`
Provide a custom serializer. For example, supposing that we have a `FormControl` that carries a Date and we want to persist, in the query params, a custom value, such as a `string` Date, we can do something like the following `serializer`:
```ts
const def = { serializer: (value) => (value instanceof Date ? value.toISOString().slice(0, 10) : (value as string)) };
```
### `strategy`
#### `twoWay`
The default strategy is `twoWay`, which means that query parameters get synced **once** with the form group, and any subsequent form value changes are synced with the URL.
#### `modelToUrl`
As we work with async control values, such as a dropdown list with its options coming from the server, we cannot immediately update the control. When this occurs, we can use the `modelToUrl` strategy, which doesn't update the control value when the page loads.
Once the data is available, we can call the `manager.syncDefs()` or `manager.syncAllDefs()` methods to update the controls based on the current query parameters:
```ts
@Component()
export class MyComponent {
filters = new FormGroup({
searchTerm: new FormControl(),
users: new FormControl([]),
someBoolean: new FormControl(false),
});
bindQueryParamsManager = this.factory
.create([
{ queryKey: 'searchTerm' },
{ queryKey: 'someBoolean', type: 'boolean' },
{ queryKey: 'users', type: 'array', strategy: 'modelToUrl' },
])
.connect(this.filters);
constructor(private factory: BindQueryParamsFactory) {}
ngOnInit() {
service.getUsers().subscribe((users) => {
// Initalize the dropdown
this.users = users;
// Sync specific controls use:
this.manager.syncDefs('users');
// Sync all controls
this.manager.syncAllDefs();
});
}
ngOnDestroy() {
this.bindQueryParamsManager.destroy();
}
}
```
Note that `syncDefs` will always be called once under the hood.
## Browser Support
The library uses the [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) API, which supported in any browser except IE.
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
---
_Source: https://npm.io/package/@ngneat/bind-query-params-patch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
