@ngneat/bind-query-params - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0

lib/BindQueryParamsFactory.d.ts

		@@ -1,13 +0,12 @@
		import { ActivatedRoute, Router } from '@angular/router';
		import { Router } from '@angular/router';
		import { BindQueryParamsManager } from './BindQueryParamsManager';
		import { BindQueryParamsOptions, QueryParamParams } from './types';
		import { BindQueryParamsOptions, QueryDefOptions } from './types';
		import * as i0 from "@angular/core";
		export declare class BindQueryParamsFactory {
		private router;
		private activeRoute;
		private options;
		constructor(router: Router, activeRoute: ActivatedRoute, options: BindQueryParamsOptions);
		create<T>(defs: QueryParamParams<T>[] \| QueryParamParams<T>): BindQueryParamsManager<T>;
		constructor(router: Router, options: BindQueryParamsOptions);
		create<T>(defs: QueryDefOptions<T>[] \| QueryDefOptions<T>, createOptions?: Pick<QueryDefOptions, 'syncInitialControlValue' \| 'syncInitialQueryParamValue'>): BindQueryParamsManager<T>;
		static ɵfac: i0.ɵɵFactoryDeclaration<BindQueryParamsFactory, never>;
		static ɵprov: i0.ɵɵInjectableDeclaration<BindQueryParamsFactory>;
		}

lib/BindQueryParamsManager.d.ts

		import { FormGroup } from '@angular/forms';
		import { ActivatedRoute, Router } from '@angular/router';
		import { BindQueryParamsOptions, QueryParamParams, SyncDefsOptions } from './types';
		import { Router } from '@angular/router';
		import { BindQueryParamsOptions, QueryDefOptions, SyncDefsOptions } from './types';
		import { QueryParamDef } from './QueryParamDef';
		export declare class BindQueryParamsManager<T = any> {
		private router;
		private activeRoute;
		private options;
		private createOptions?;
		private defs;
		@@ -14,3 +14,3 @@ private group;
		connect(group: FormGroup): this;
		constructor(router: Router, activeRoute: ActivatedRoute, defs: QueryParamParams<T>[] \| QueryParamParams<T>, options: BindQueryParamsOptions);
		constructor(router: Router, defs: QueryDefOptions<T>[] \| QueryDefOptions<T>, options: BindQueryParamsOptions, createOptions?: Pick<QueryDefOptions<any>, "syncInitialControlValue" \| "syncInitialQueryParamValue"> \| undefined);
		onInit(): void;
		@@ -24,4 +24,6 @@ destroy(): void;
		someParamExists(): boolean;
		get search(): URLSearchParams;
		private handleInitialURLSync;
		private updateQueryParams;
		private updateControl;
		}

lib/QueryParamDef.d.ts

		@@ -1,12 +0,12 @@
		import { QueryParamParams } from './types';
		import { QueryDefOptions } from './types';
		export declare class QueryParamDef<QueryParams = any> {
		private config;
		constructor(config: QueryParamParams<QueryParams>);
		constructor(config: QueryDefOptions<QueryParams>);
		get queryKey(): keyof QueryParams & string;
		get path(): string;
		get type(): import("./types").ParamDefType;
		get strategy(): "modelToUrl" \| "twoWay";
		get parser(): ((value: string) => any) \| undefined;
		get syncInitialControlValue(): boolean \| undefined;
		get syncInitialQueryParamValue(): boolean;
		get serializer(): ((value: any) => string \| null) \| undefined;
		get syncInitialValue(): boolean;
		get removeEmptyValue(): boolean;
		@@ -13,0 +13,0 @@ serialize(controlValue: any): string \| null;

lib/types.d.ts

		import { QueryParamDef } from './QueryParamDef';
		export declare type ParamDefType = 'boolean' \| 'array' \| 'number' \| 'string' \| 'object';
		export declare type QueryParamParams<QueryParams = any> = {
		export declare type QueryDefOptions<QueryParams = any> = {
		queryKey: keyof QueryParams & string;
		path?: string;
		type?: ParamDefType;
		strategy?: 'modelToUrl' \| 'twoWay';
		parser?: (value: string) => any;
		serializer?: (value: any) => string \| null;
		syncInitialValue?: boolean;
		syncInitialControlValue?: boolean;
		syncInitialQueryParamValue?: boolean;
		removeEmptyValue?: boolean;
		@@ -12,0 +12,0 @@ };

package.json

		{
		"name": "@ngneat/bind-query-params",
		"version": "4.0.0",
		"version": "5.0.0",
		"description": "Sync URL Query Params with Angular Form Controls",
		"dependencies": {
		"tslib": "^2.0.0",
		"tslib": "2.3.1",
		"lodash.set": "4.3.2"
		},
		"peerDependencies": {
		"@angular/core": ">=13.0.0"
		},
		"keywords": [
		@@ -10,0 +13,0 @@ "angular",

public-api.d.ts

		export { BIND_QUERY_PARAMS_OPTIONS } from './lib/options';
		export { BindQueryParamsFactory } from './lib/BindQueryParamsFactory';
		export { QueryDefOptions } from './lib/types';
		export { BindQueryParamsManager } from './lib/BindQueryParamsManager';

README.md

		@@ -30,3 +30,3 @@ <p align="center">

		Inject the `BindQueryParamsFactory` provider, pass an array of [definitions](#queryparam-definition) and `connect` it to your form:
		Inject the `BindQueryParamsFactory` provider, pass an array of [definitions](#QueryParamDefinition) and `connect` it to your form:

		@@ -90,10 +90,2 @@ <!-- prettier-ignore -->

		### `syncInitialValue`

		Whether to sync the initial control value in the URL. Relevant only when using the `modelToUrl` strategy.

		### `removeEmptyValue`

		Whether to remove empty control values from url.

		### `parser`
		@@ -115,8 +107,14 @@

		### `strategy`

		When working with async control values, for example, a dropdown list that its options come from the server, we cannot immediately update the control.
		### `syncInitialControlValue`
		Set the initial control value in the URL (defaults to `false`)

		In these cases, we can provide the `modelToUrl` strategy, that will not update the control value when the page loads. When the data is available we can call the `manager.syncDefs()` or `manager.syncAllDefs()` method that'll update the controls based on the current query params:
		### `syncInitialQueryParamValue`
		Sync the initial query paramater with the form group (defaults to `true`)

		#### Handle Async Data
		When working with async controls, such as a dropdown list whose options are coming from the server, we cannot update the control immediately. In those cases, you can set `syncInitialQueryParamValue` to `false`, which will force the control value to not be updated 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
		@@ -135,3 +133,3 @@ @Component()
		{ queryKey: 'someBoolean', type: 'boolean' },
		{ queryKey: 'users', type: 'array', strategy: 'modelToUrl' },
		{ queryKey: 'users', type: 'array', syncInitialQueryParamValue: false },
		])
		@@ -164,24 +162,1 @@ .connect(this.filters);
		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)):

		<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
		<!-- prettier-ignore-start -->
		<!-- markdownlint-disable -->
		<table>
		<tr>
		<td align="center"><a href="https://www.netbasal.com/"><img src="https://avatars1.githubusercontent.com/u/6745730?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href="https://github.com/@ngneat/bind-query-params/commits?author=NetanelBasal" title="Code">💻</a> <a href="#content-NetanelBasal" title="Content">🖋</a> <a href="https://github.com/@ngneat/bind-query-params/commits?author=NetanelBasal" title="Documentation">📖</a> <a href="#ideas-NetanelBasal" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-NetanelBasal" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
		<td align="center"><a href="https://github.com/ritox842"><img src="https://avatars.githubusercontent.com/u/7280441?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gili Yaniv</b></sub></a><br /><a href="https://github.com/@ngneat/bind-query-params/commits?author=ritox842" title="Code">💻</a></td>
		</tr>
		</table>

		<!-- markdownlint-restore -->
		<!-- prettier-ignore-end -->

		<!-- ALL-CONTRIBUTORS-LIST:END -->

		This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

		<div>Icons made by <a href="http://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>

esm2020/lib/BindQueryParamsFactory.mjs