Repository files navigation

Sync URL Query Params with Angular Form Controls

The library provides a simple and reusable solution for binding URL query params to Angular Forms

npm install @ngneat/bind-query-params

Inject theBindQueryParamsFactory provider, pass an array ofdefinitions andconnect it to your form:

import{BindQueryParamsFactory}from'@ngneat/bind-query-params';interfaceFilters{searchTerm:string;someBoolean:boolean;}@Component({template:`Your normal form setup`,})exportclassMyComponent{filters=newFormGroup({searchTerm:newFormControl(),someBoolean:newFormControl(false),});bindQueryParamsManager=this.factory.create<Filters>([{queryKey:'searchTerm'},{queryKey:'someBoolean',type:'boolean'}]).connect(this.filters);constructor(privatefactory:BindQueryParamsFactory){}ngOnDestroy(){this.bindQueryParamsManager.destroy();}}

With this setup, themanager will take care of two things:

1. Update thecontrol's value when the page is loaded for the first time
2. Update the URL query parameter when the correspondingcontrol value changes

The query parameter key

The form control path. If it is not specified, the manager assumes that thepath is thequeryKey. We can also pass nested keys, for example,person.name:

{queryKey:'name',path:'person.name'}

Specify the control value type. Available options are:boolean,array,number,string andobject.Before updating the control with the value, the manager will parse it based on the providedtype.

Provide a custom parser. For example, the defaultarray parser converts the value to anarray of strings. If we need it to be an array of numbers, we can pass the followingparser:

constdef={parser:(value)=>value.split(',').map((v)=>+v)};

Provide a custom serializer. For example, supposing that we have aFormControl that carries a Date and we want to persist, in the query params, a custom value, such as astring Date, we can do something like the followingserializer:

constdef={serializer:(value)=>(valueinstanceofDate ?value.toISOString().slice(0,10) :(valueasstring))};

When working with async control values, for example, a dropdown list that its options come from the server, we cannot immediately update the control.

In this cases, we can provide themodelToUrl strategy, that will not update the control value when the page loads. When the data is available we can call themanager.syncDefs() method that'll update the controls based on the current query params:

@Component()exportclassMyComponent{filters=newFormGroup({searchTerm:newFormControl(),users:newFormControl([]),someBoolean:newFormControl(false),});bindQueryParamsManager=this.factory.create<Filters>([{queryKey:'searchTerm'},{queryKey:'someBoolean',type:'boolean'},{queryKey:'users',type:'array',strategy:'modelToUrl'},]).connect(this.filters);constructor(privatefactory:BindQueryParamsFactory){}ngOnInit(){service.getUsers().subscribe((users)=>{// Initalize the dropdownthis.users=users;this.manager.syncDefs('users');});}ngOnDestroy(){this.bindQueryParamsManager.destroy();}}

Note thatsyncDefs will always be called once under the hood.

The library uses theURLSearchParams API, which supported in any browser except IE.

Thanks goes to these wonderful people (emoji key):

Netanel Basal 💻🖋📖🤔🚇

This project follows theall-contributors specification. Contributions of any kind welcome!