Hey everyone I was wondering how to get the state params from a state using Angular 2, TypeScript & ui-router. I tried reviewing the new docs but they don't seem to have much documentation for ng2 ui-router.

Below I have added my ponent.ts for reference. Any help would be greatly appreciated.

import {Component} from '@angular/core';
import {HTTP_PROVIDERS} from '@angular/http';
import {UIRouter} from 'ui-router-ng2/router';

@Component({
  selector: 'Detail',
  template: require('./detail.html'),
  providers: [HTTP_PROVIDERS]
})

export class Detail {
  constructor(private uiRouter:UIRouter) {
    console.log('uiRouter ', this.uiRouter.globals.params);
  }
}

In Angular 1 I would do this as follows:

(function() {
  'use strict';

  angular
  .module('private')
  .controller('Controller', Controller);

  function Controller($state) {
    var vm = this;
    console.log($state.params.studentID);
  }
})();

Again any advice would be greatly appreciated.

Hey everyone I was wondering how to get the state params from a state using Angular 2, TypeScript & ui-router. I tried reviewing the new docs but they don't seem to have much documentation for ng2 ui-router.

Below I have added my ponent.ts for reference. Any help would be greatly appreciated.

import {Component} from '@angular/core';
import {HTTP_PROVIDERS} from '@angular/http';
import {UIRouter} from 'ui-router-ng2/router';

@Component({
  selector: 'Detail',
  template: require('./detail.html'),
  providers: [HTTP_PROVIDERS]
})

export class Detail {
  constructor(private uiRouter:UIRouter) {
    console.log('uiRouter ', this.uiRouter.globals.params);
  }
}

In Angular 1 I would do this as follows:

(function() {
  'use strict';

  angular
  .module('private')
  .controller('Controller', Controller);

  function Controller($state) {
    var vm = this;
    console.log($state.params.studentID);
  }
})();

Again any advice would be greatly appreciated.

• javascript
• angularjs
• typescript
• angular
• angular-ui-router

2 Answers 2

I was able to resolve the state param issue I was having by doing the following:

import {Component} from '@angular/core';
import {HTTP_PROVIDERS} from '@angular/http';
import {UIROUTER_DIRECTIVES} from 'ui-router-ng2';
import {UIRouter} from 'ui-router-ng2/router';

@Component({
  selector: 'Detail',
  template: require('./detail.html'),
  directives: [UIROUTER_DIRECTIVES],
  providers: [HTTP_PROVIDERS]
})

export class Detail {
    public detailParam: any;

    constructor(private uiRouter:UIRouter) {
      this.detailParam = this.uiRouter.globals.params;
      console.log('state params: ', this.detailParam);
  }
}

But after a little more research I found better documentation on ui-router for Angular 2 here: https://ui-router.github.io/ng2/

Looks like the correct way of dealing with state params is with

import {Transition} from "ui-router-ng2"

And using

trans.params().detailID

I was not able to get the trans.params() to work at this particular moment but at least I found a temporary solution and better documentation to find the proper solution.

please see my answer about how you can use Transition (as was mentioned by Galactic Ranger) in order to get stae parameters: How to read $stateParms value in Angular2?