passing multiple params in route angular 4

I was in need of something like to pass the multiple query parameters constructing them dynamically. So, perform the below steps to achieve the same:

For e.g.,

const arrayItem = [{ source: "external" }, { fileFiler: "File Name 1" }];
const queryParams = arrayItem.reduce((arrObj, item) => Object.assign(arrObj, item, {}));  // this will convert into single object. 

// Output: {source: "external", fileFiler: "File Name 1"}

And finally called the below line to pass the same into route:

this.router.navigate([], { relativeTo: this.activatedRoute, queryParams });

Hope this helps!

You are mixing the syntax for required routing parameters with optional routing parameters.

Angular provides three types of route parameters: 1) Required parameters. 2) Optional parameters. 3) Query parameters.

Required parameters are for required values, such as an Id to display a detail page. Is the width and height required in your case?

Optional parameters are for values that are not always required, such as passing entered search criteria to a list page that should use that criteria.

Query parameters are similar to optional parameters but you can retain them across routes. So if you want to route somewhere and back again, you can retain the parameters.

ONLY required parameters are defined in the route configuration. Optional and query parameters are not included in the route configuration (so the path would be just 'game')

The syntax to set the parameters is then different depending on the type:

Required parameters: this.router.navigate(['game', width, height]);

Optional parameters: this.router.navigate(['game', {width:width,height:height}]);

Query parameters: this.router.navigate(['game', { queryParams: {width:width, height:height}}])

For more information, check this out: https://app.pluralsight.com/library/courses/angular-routing/table-of-contents