Component decorator and metadata.
One or more animation trigger()
calls, containing
state()
and transition()
definitions.
See the Animations guide and animations API documentation.
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
.An encapsulation policy for the template and CSS styles. One of:
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
.
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}.
Defines the name that can be used in the template to assign this directive to a variable.
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:
window
, document
or body
.false
, then preventDefault
is applied on the DOM
event. A handler method can refer to the $event
local variable.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
.
Overrides the default interpolation start and end delimiters ().
When present, this directive/component is ignored by the AOT compiler.
It remains in distributed code, and the JIT compiler attempts to compile it
at run time, in the browser.
To ensure the correct behavior, the app must import @angular/compiler
.
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
.
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.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.
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.
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>
One or more relative paths or absolute URLs for files containing CSS stylesheets to use in this component.
One or more inline CSS stylesheets to use in this component.
An inline template for an Angular component. If provided,
do not supply a template file using templateUrl
.
The relative path or absolute URL of a template file for an Angular component.
If provided, do not supply an inline template using template
.
Defines the set of injectable objects that are visible to its view DOM children. See example.
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:
ui-view
Called with:
Transition
that is about to exit the component's state@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?");
}
}
}
a hook result which may cancel or alter the pending Transition (see [[HookResult]])
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:
@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]}`)
});
}
}
Generated using TypeDoc
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). TheComponent
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.
This interface has been replaced by UiOnExit and UiOnParamsChanged.