Ng2ViewDeclaration | @uirouter/angular
  • Public
  • Public/Protected
  • All




Optional $context

$context: ViewContext

The context that this view is declared within.

Optional $name

$name: string

The raw name for the view declaration, i.e., the [[StateDeclaration.views]] property name.

Optional $type

$type: string

A type identifier for the View

This is used when loading prerequisites for the view, before it enters the DOM. Different types of views may load differently (e.g., templateProvider+controllerProvider vs component class)

Optional $uiViewContextAnchor

$uiViewContextAnchor: string

The normalized context anchor (state name) for the uiViewName

When targeting a ui-view, the uiViewName address is anchored to a context name (state name).

Optional $uiViewName

$uiViewName: string

The normalized address for the ui-view which this ViewConfig targets.

A ViewConfig targets a ui-view in the DOM (relative to the uiViewContextAnchor) which has a specific name.


header or $default

The uiViewName can also target a nested view by providing a dot-notation address

example or foo.$

Optional bindings

bindings: {}

An object which maps resolve keys to component bindings.

A property of Ng2StateDeclaration or Ng2ViewDeclaration:

When using a component declaration (component: MyComponent), each input binding for the component is supplied data from a resolve of the same name, by default. You may supply data from a different resolve name by mapping it here. This might be useful if you want to reuse the same resolve value with various components with different input binding names.

Each key in this object is the name of one of the component's input bindings. Each value is the name of the resolve that should be provided to that binding.

Any component bindings that are omitted from this map get the default behavior of mapping to a resolve of the * same name.


export const fooState = {
  name: 'foo',
  component: MyComponent,
  resolve: [
    { token: 'users', deps: [UserService], resolveFn: getUsers }
  bindings: {
    resolveData: 'users'

export function getUsers(userservice) {
  return userservice.getUsers();

@Component() {
class MyComponent {
  @Input() resolveData;
  constructor() { }

Type declaration

  • [key: string]: string

Optional component

component: Type<any>

The Component class to use for this view.

A property of Ng2StateDeclaration or Ng2ViewDeclaration:

The component class which will be used for this view.


.state('profile', {
  // Use the <my-profile></my-profile> component for the Unnamed view
  component: MyProfileComponent,

.state('messages', {
  // use the <nav-bar></nav-bar> component for the view named 'header'
  // use the <message-list></message-list> component for the view named 'content'
  views: {
    header: { component: NavBar },
    content: { component: MessageList }

// Named views shorthand:
// Inside a "views:" block, a Component class (NavBar) is shorthand for { component: NavBar }
.state('contacts', {
  // use the <nav-bar></nav-bar> component for the view named 'header'
  // use the <contact-list></contact-list> component for the view named 'content'
  views: {
    header: NavBar,
    content: ContactList

Accessing Resolve Data

The component can access the Transition's Ng2StateDeclaration.resolve data in one of two ways:

1) Using Dependency Injection in the component constructor

(using Typescript)

class MyComponent {
  constructor(@Inject("myResolveData") public resolveValueA, resolveValueB: public SomeClass) {

(using ES6/7/babel)

class MyComponent {
  static get parameters() {
    return [["myResolveData"], [MyResolveClass]];
  constructor(resolveValueA, resolveValueB) {
    this.resolveValueA = resolveValueA;
    this.resolveValueB = resolveValueB;

See also:

2) Using a component input

Note: To bind a resolve to a component input, the resolves must provide: a string value

@Component() {
  inputs: ['resolveValueA']
class MyComponent {
  @Input() resolveValueB;
  @Input("resolveValueC") resolveValueC;

  constructor() {

Generated using TypeDoc