Ng2Component | @uirouter/angular
Options
Menu

Interface Ng2Component

The shape of a controller for a view (and/or component), defining the controller callbacks.

A UI-Router view has an Angular Component (see Ng2ViewDeclaration.component). The Component may define component-level hooks which UI-Router will call at the appropriate times. These callbacks are similar to Transition Hooks (IHookRegistry), but are only called if the view/component is currently active.

This interface defines the UI-Router component callbacks.

Hierarchy

  • Component
    • Ng2Component

Index

Properties

Component: ComponentDecorator

Component decorator and metadata.

Component decorator and metadata.

annotation
animations: any[]

One or more animation trigger() calls, containing state() and transition() definitions. See the Animations guide and animations API documentation.

One or more animation trigger() calls, containing state() and transition() definitions. See the Animations guide and animations API documentation.

changeDetection: ChangeDetectionStrategy

The change-detection strategy to use for this component.

The change-detection strategy to use for this component.

When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings. The strategy is one of:

  • ChangeDetectionStrategy#OnPush sets the strategy to CheckOnce (on demand).
  • ChangeDetectionStrategy#Default sets the strategy to CheckAlways.
encapsulation: ViewEncapsulation

An encapsulation policy for the template and CSS styles. One of:

  • ViewEncapsulation.Native: Deprecated. Use ViewEncapsulation.ShadowDom instead.
  • ViewEncapsulation.Emulated: Use shimmed CSS that emulates the native behavior.
  • ViewEncapsulation.None: Use global CSS without any encapsulation.
  • ViewEncapsulation.ShadowDom: Use Shadow DOM v1 to encapsulate styles.

An encapsulation policy for the template and CSS styles. One of:

  • ViewEncapsulation.Native: Deprecated. Use ViewEncapsulation.ShadowDom instead.
  • ViewEncapsulation.Emulated: Use shimmed CSS that emulates the native behavior.
  • ViewEncapsulation.None: Use global CSS without any encapsulation.
  • ViewEncapsulation.ShadowDom: Use Shadow DOM v1 to encapsulate styles.

If not supplied, the value is taken from CompilerOptions. The default compiler option is ViewEncapsulation.Emulated.

If the policy is set to ViewEncapsulation.Emulated and the component has no styles or styleUrls specified, the policy is automatically switched to ViewEncapsulation.None.

entryComponents: Array<Type<any> | any[]>

A set of components that should be compiled along with this component. For each component listed here, Angular creates a {@link ComponentFactory} and stores it in the {@link ComponentFactoryResolver}.

A set of components that should be compiled along with this component. For each component listed here, Angular creates a {@link ComponentFactory} and stores it in the {@link ComponentFactoryResolver}.

exportAs: string

Defines the name that can be used in the template to assign this directive to a variable.

Defines the name that can be used in the template to assign this directive to a variable.

usagenotes
@Directive({
  selector: 'child-dir',
  exportAs: 'child'
})
class ChildDir {
}

@Component({
  selector: 'main',
  template: `<child-dir #c="child"></child-dir>`
})
class MainComponent {
}
host: object

Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs.

Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs.

Angular automatically checks host property bindings during change detection. If a binding changes, Angular updates the directive's host element.

When the key is a property of the host element, the property value is the propagated to the specified DOM property.

When the key is a static attribute in the DOM, the attribute value is propagated to the specified property in the host element.

For event handling:

  • The key is the DOM event that the directive listens to. To listen to global events, add the target to the event name. The target can be window, document or body.
  • The value is the statement to execute when the event occurs. If the statement evaluates to false, then preventDefault is applied on the DOM event. A handler method can refer to the $event local variable.

Type declaration

  • [key: string]: string
inputs: string[]

Enumerates the set of data-bound input properties for a directive

Enumerates the set of data-bound input properties for a directive

Angular automatically updates input properties during change detection. The inputs property defines a set of directiveProperty to bindingProperty configuration:

  • directiveProperty specifies the component property where the value is written.
  • bindingProperty specifies the DOM property where the value is read from.

When bindingProperty is not provided, it is assumed to be equal to directiveProperty.

usagenotes

The following example creates a component with two data-bound properties.

@Component({
  selector: 'bank-account',
  inputs: ['bankName', 'id: account-id'],
  template: `
    Bank Name: 
    Account Id: 
  `
})
class BankAccount {
  bankName: string;
  id: string;
interpolation: [string, string]

Overrides the default encapsulation start and end delimiters ()

Overrides the default encapsulation start and end delimiters ()

jit: true

If true, this directive/component will be skipped by the AOT compiler and so will always be compiled using JIT.

If true, this directive/component will be skipped by the AOT compiler and so will always be compiled using JIT.

This exists to support future Ivy work and has no effect currently.

moduleId: string

The module ID of the module that contains the component. The component must be able to resolve relative URLs for templates and styles. SystemJS exposes the __moduleName variable within each module. In CommonJS, this can be set to module.id.

The module ID of the module that contains the component. The component must be able to resolve relative URLs for templates and styles. SystemJS exposes the __moduleName variable within each module. In CommonJS, this can be set to module.id.

outputs: string[]

Enumerates the set of event-bound output properties.

Enumerates the set of event-bound output properties.

When an output property emits an event, an event handler attached to that event in the template is invoked.

The outputs property defines a set of directiveProperty to bindingProperty configuration:

  • directiveProperty specifies the component property that emits events.
  • bindingProperty specifies the DOM property the event handler is attached to.
usagenotes
@Component({
  selector: 'child-dir',
  outputs: [ 'bankNameChange' ]
  template: `<input (input)="bankNameChange.emit($event.target.value)" />`
})
class ChildDir {
 bankNameChange: EventEmitter<string> = new EventEmitter<string>();
}

@Component({
  selector: 'main',
  template: `
     <child-dir (bankNameChange)="onBankNameChange($event)"></child-dir>
  `
})
class MainComponent {
 bankName: string;

  onBankNameChange(bankName: string) {
    this.bankName = bankName;
  }
}
preserveWhitespaces: boolean

True to preserve or false to remove potentially superfluous whitespace characters from the compiled template. Whitespace characters are those matching the \s character class in JavaScript regular expressions. Default is false, unless overridden in compiler options.

True to preserve or false to remove potentially superfluous whitespace characters from the compiled template. Whitespace characters are those matching the \s character class in JavaScript regular expressions. Default is false, unless overridden in compiler options.

providers: Provider[]

Configures the injector of this directive or component with a token that maps to a provider of a dependency.

Configures the injector of this directive or component with a token that maps to a provider of a dependency.

queries: object

Configures the queries that will be injected into the directive.

Configures the queries that will be injected into the directive.

Content queries are set before the ngAfterContentInit callback is called. View queries are set before the ngAfterViewInit callback is called.

usagenotes

The following example shows how queries are defined and when their results are available in lifecycle hooks:

@Component({
  selector: 'someDir',
  queries: {
    contentChildren: new ContentChildren(ChildDirective),
    viewChildren: new ViewChildren(ChildDirective)
  },
  template: '<child-directive></child-directive>'
})
class SomeDir {
  contentChildren: QueryList<ChildDirective>,
  viewChildren: QueryList<ChildDirective>

  ngAfterContentInit() {
    // contentChildren is set
  }

  ngAfterViewInit() {
    // viewChildren is set
  }
}
annotation

Type declaration

  • [key: string]: any
selector: string

The CSS selector that identifies this directive in a template and triggers instantiation of the directive.

The CSS selector that identifies this directive in a template and triggers instantiation of the directive.

Declare as one of the following:

  • element-name: Select by element name.
  • .class: Select by class name.
  • [attribute]: Select by attribute name.
  • [attribute=value]: Select by attribute name and value.
  • :not(sub_selector): Select only if the element does not match the sub_selector.
  • selector1, selector2: Select if either selector1 or selector2 matches.

Angular only allows directives to apply on CSS selectors that do not cross element boundaries.

For the following template HTML, a directive with an input[type=text] selector, would be instantiated only on the <input type="text"> element.

<form>
  <input type="text">
  <input type="radio">
<form>
styleUrls: string[]

One or more relative paths or absolute URLs for files containing CSS stylesheets to use in this component.

One or more relative paths or absolute URLs for files containing CSS stylesheets to use in this component.

styles: string[]

One or more inline CSS stylesheets to use in this component.

One or more inline CSS stylesheets to use in this component.

template: string

An inline template for an Angular component. If provided, do not supply a template file using templateUrl.

An inline template for an Angular component. If provided, do not supply a template file using templateUrl.

templateUrl: string

The relative path or absolute URL of a template file for an Angular component. If provided, do not supply an inline template using template.

The relative path or absolute URL of a template file for an Angular component. If provided, do not supply an inline template using template.

viewProviders: Provider[]

Defines the set of injectable objects that are visible to its view DOM children. See example.

Defines the set of injectable objects that are visible to its view DOM children. See example.

Methods

  • uiCanExit(newTransition?: Transition): HookResult
  • This callback is called when the routed component's state is about to be exited.

  • This callback is called when the routed component's state is about to be exited.

    The callback can be used to cancel or alter the new Transition that would otherwise exit the component's state.

    This callback is used to inform a view that it is about to be exited, due to a new Transition. The callback can ask for user confirmation, and cancel or alter the new Transition. The callback should return a value, or a promise for a value. If a promise is returned, the new Transition waits until the promise settles.

    Called when:

    • The component is still active inside a ui-view
    • A new Transition is about to run
    • The new Transition will exit the view's state

    Called with:

    • The Transition that is about to exit the component's state

    Example:

    @Component({
      template: '<input type="text">'
    })
    class MyComponent {
      dirty = true;
    
      constructor(public confirmService: confirmService) {
    
      }
    
      uiCanExit(newTransition: Transition) {
        if (this.dirty && newTransition.to() !== 'logout') {
          return this.confirmService.confirm("Exit without saving changes?");
        }
      }
    }

    Parameters

    • newTransition: Optional  Transition

    Returns HookResult

    :

    a hook result which may cancel or alter the pending Transition (see HookResult)


  • uiOnParamsChanged(newParams: object, trans?: Transition): void
  • This callback is called when parameter values change

  • This callback is called when parameter values change

    This callback is used to respond dynamic parameter values changing. It is called when a transition changed one or more dynamic parameter values, and the routed component was not destroyed.

    It receives two parameters:

    • An object with (only) changed parameter values. The keys are the parameter names and the values are the new parameter values.
    • The Transition which changed the parameter values.

    Example:

    @Component({
      template: '<input type="text">'
    })
    class MyComponent {
      uiOnParamsChanged(newParams: { [paramName: string]: any }, trans: Transition) {
        Object.keys(newParams).forEach(paramName => {
          console.log(`${paramName} changed to ${newParams[paramName]}`)
        });
      }
    }

    Parameters

    • newParams object
      • [paramName: string]: any
    • trans: Optional  Transition

    Returns void


Generated using TypeDoc