I am working on an angular project. There are some filters to filter out some data and display it. All the filters are working fine and while I add some value in the filters it also updates the URL. Like if I add value in my video type filter, the URL add the filter values in the URL as a parmas. For example:

https://localhost:4200/example?video_format_type=Outstream

If I add another value in the filter, then the URL is becomes like

https://localhost:4200/example?video_format_type=Outstream&video_format_type=Instream

But I reload the page the get shorten. It removes all the params except the first one.

https://localhost:4200/example?video_format_type=Outstream

Why the URL params is get shorten or vanishes while reloading the page?

this.router.navigate([], {
      queryParams,
      queryParamsHandling: 'merge'
    });

I have done some research over internet. But have not find any possible cause why this possibly could happen? It may be noob question to ask. But I am new in angular. It would be great if anyone give me some suggestions on that.