ngneat / bind-query-params

Sync URL Query Params with Angular Form Controls

Home Page:https://netbasal.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using useHash won't route properly

weilinzung opened this issue · comments

commented

When using useHash on the route, query params would be missing after navigating with the query params.

 RouterModule.forRoot(routes, { useHash: true })

Navigating:
http://localhost:4200/app/#/user?search=test

Then became:

http://localhost:4200/app/#/user

we are using this trick in our app module:

  providers: [
    ...,
    {
      provide: BIND_QUERY_PARAMS_OPTIONS,
      useValue: {
        windowRef: {
          location: {
            get search() {
              return window.location.hash.replace(/[^?]*\??/, '');
            },
          },
        },
      },
    },
   ...
   ]
commented

@cztomsik It works on the URL if with strategy: 'modelToUrl'. but that still doesn't patch the params value into the formGroup filed.

  public filterFormGroup = this.fb.group({
    search: [null]
  });

  private bindQueryParamsManager = this.bindQueryParams
    .create<{ search: string }>([
      {
        queryKey: 'search',
        type: 'string',
        strategy: 'modelToUrl'
      }
    ])
    .connect(this.filterFormGroup);

we are little behind (2-3 versions), so I can't tell if it still works, but it definitely worked for us

I can confirm the issue and the suggested fix by @cztomsik didn't work for me either

"@ngneat/bind-query-params": "^5.0.0",
"@angular/core": "~12.2.13",