Mapping URL Querystring Parameters to Parameter Model Classes in Angular2

In ASP.Net MVC we can define a parameter model class, which is automatically filled by the framework before invocation of the controller’s method implementing the action. (More precisely, the Databinder sets the values of the public properties of the object)

public class QueryStringParameters 
  public int Id { get; set; }
  public string Foo  { get; set; }
  public string Bar  { get; set; }

Angular2 does not seem to provide such a mechanism out of the box. I found 3 classes handling URL parameters, and there are probably more

  • import { RouteParams } from 'angular2/router';
  • import { URLSearchParams } from 'angular2/http';
  • UrlParser in angular2/ts/src/router/url_parser

where UrlParser cannot be imported in TypeScript code.

So I tried to figure out how to use RouteParams and URLSearchParams and, using the URL http://localhost:3000/default?id=3&foo=8&bar=4711, found these differences:





Whereas routeParams.params is a simple Object with propery names derived from the query string, URLSearchParams contains a Map<string, string[]> (see url_search_params.d.ts in node_modules\angular2\src\http).

I chose routeParams to continue, because I do not use multiple occurrences of URL parameters.

URL parameters are case-sensitive in Angular2 / TypeScript / JavaScript, whereas they are case-insensitive in ASP.Net MVC. To copy the query string parameter values into a model class, a method to ignore case of both the URL parameters and the model class properties is therefore necessary.

To get the names of the parameters, we can use the function Object.keys() applied on routeParams.params, and we map the lower-case version of the name to the name.

Next, we iterate through the Object.keys of the parameter model class, and assign the model class property the value given by the query string parameter if one exists:

import {RouteParams} from 'angular2/router';

export function fromRouteParams<T>(model: T, routeParams: RouteParams): T {
  var rk = [];
  Object.keys(routeParams.params).forEach(k => { rk[k.toLowerCase()] = k; });

  var mk = Object.keys(model);
    k => {
      if (rk.indexOf[k.toLowerCase()] != -1)
      model[k] = routeParams.get(rk[k.toLowerCase()]);

  return model;

Finally, given the TypeScript parameter model class

export class QueryStringParameters {
  public Id: number = null;
  public Foo: number = null;
  public Bar: number = null;

the component defined as

import {RouteParams} from 'angular2/router';
import {QueryStringParameters} from './model/QueryStringParameters';
import {fromRouteParams} from './helpers/routeParamsHelpers';
export class DefaultComponent { 
  private q: QueryStringParameters; 
  constructor(routeParams: RouteParams) {
    this.q = fromRouteParams(new QueryStringParameters(), routeParams);

containing a simple Angular2 template

template: `Id: {{ q.Id }}, Bar: {{ q.Bar }}, Foo: {{ q.Foo }}`

we can navigate to the URL http://localhost:3000/default?id=3&foo=8&bar=4711 and view the resulting HTML:

Id: 3, Bar: 4711, Foo: 8

Note that my function does not perform type checks on the model class properties, as it just copies the original parameter string values.

One Response to Mapping URL Querystring Parameters to Parameter Model Classes in Angular2

  1. […] method. There is no automatic mapping of URL parameters to model class properties, but I developed a simple TypeScript function which will provide this […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: