...
+ * ...
+ * ```
+ *
+ * Whenever the `someExpression` expression changes, the `properties` declaration instructs
+ * Angular to update the `Tooltip`'s `text` property.
+ *
+ * ### Bindings With Pipes
+ *
+ * You can use pipes in bindings, as follows:
+ *
+ * ```html
+ *
+ * ```
+ */
+ properties: string[];
+
+
+ /**
+ * Enumerates the set of emitted events.
+ *
+ * ## Syntax
+ *
+ * ```
+ * @Component({
+ * events: ['statusChange']
+ * })
+ * class TaskComponent {
+ * statusChange: EventEmitter;
+ *
+ * constructor() {
+ * this.statusChange = new EventEmitter();
+ * }
+ *
+ * onComplete() {
+ * this.statusChange.next('completed');
+ * }
+ * }
+ * ```
+ *
+ * Use `propertyName: eventName` when the event emitter property name is different from the name
+ * of the emitted event:
+ *
+ * ```
+ * @Component({
+ * events: ['status: statusChange']
+ * })
+ * class TaskComponent {
+ * status: EventEmitter;
+ *
+ * constructor() {
+ * this.status = new EventEmitter();
+ * }
+ *
+ * onComplete() {
+ * this.status.next('completed');
+ * }
+ * }
+ * ```
+ */
+ events: string[];
+
+
+ /**
+ * Specifiy the events, actions, properties and attributes related to the host element.
+ *
+ * ## Events
+ *
+ * Specifies which DOM hostListeners a directive listens to via a set of `(event)` to `method`
+ * key-value pairs:
+ *
+ * - `event1`: the DOM event that the directive listens to.
+ * - `statement`: the statement to execute when the event occurs.
+ * If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM
+ * event.
+ *
+ * To listen to global events, a target must be added to the event name.
+ * The target can be `window`, `document` or `body`.
+ *
+ * When writing a directive event binding, you can also refer to the following local variables:
+ * - `$event`: Current event object which triggered the event.
+ * - `$target`: The source of the event. This will be either a DOM element or an Angular
+ * directive. (will be implemented in later release)
+ *
+ * ## Syntax
+ *
+ * ```
+ * @Directive({
+ * host: {
+ * '(event1)': 'onMethod1(arguments)',
+ * '(target:event2)': 'onMethod2(arguments)',
+ * ...
+ * }
+ * }
+ * ```
+ *
+ * ## Basic Event Binding:
+ *
+ * Suppose you want to write a directive that reacts to `change` events in the DOM and on
+ * `resize` events in window.
+ * You would define the event binding as follows:
+ *
+ * ```
+ * @Directive({
+ * selector: 'input',
+ * host: {
+ * '(change)': 'onChange($event)',
+ * '(window:resize)': 'onResize($event)'
+ * }
+ * })
+ * class InputDirective {
+ * onChange(event:Event) {
+ * // invoked when the input element fires the 'change' event
+ * }
+ * onResize(event:Event) {
+ * // invoked when the window fires the 'resize' event
+ * }
+ * }
+ * ```
+ *
+ * ## Properties
+ *
+ * Specifies which DOM properties a directives updates.
+ *
+ * ## Syntax
+ *
+ * ```
+ * @Directive({
+ * selector: 'input',
+ * host: {
+ * '[prop]': 'expression'
+ * }
+ * })
+ * class InputDirective {
+ * value:string;
+ * }
+ * ```
+ *
+ * In this example the prop property of the host element is updated with the expression value
+ * every time it changes.
+ *
+ * ## Attributes
+ *
+ * Specifies static attributes that should be propagated to a host element. Attributes specified
+ * in `hostAttributes` are propagated only if a given attribute is not present on a host element.
+ *
+ * ## Syntax
+ *
+ * ```
+ * @Directive({
+ * selector: '[my-button]',
+ * host: {
+ * 'role': 'button'
+ * }
+ * })
+ * class MyButton {
+ * }
+ * ```
+ *
+ * In this example using `my-button` directive (ex.: `
`) on a host element
+ * (here: `
` ) will ensure that this element will get the "button" role.
+ */
+ host: StringMap
;
+
+
+ /**
+ * Specifies which lifecycle should be notified to the directive.
+ *
+ * See {@link LifecycleEvent} for details.
+ */
+ lifecycle: LifecycleEvent[];
+
+
+ /**
+ * If set to false the compiler does not compile the children of this directive.
+ */
+ compileChildren: boolean;
+
+
+ /**
+ * Defines the set of injectable objects that are visible to a Directive and its light dom
+ * children.
+ *
+ * ## Simple Example
+ *
+ * Here is an example of a class that can be injected:
+ *
+ * ```
+ * class Greeter {
+ * greet(name:string) {
+ * return 'Hello ' + name + '!';
+ * }
+ * }
+ *
+ * @Directive({
+ * selector: 'greet',
+ * bindings: [
+ * Greeter
+ * ]
+ * })
+ * class HelloWorld {
+ * greeter:Greeter;
+ *
+ * constructor(greeter:Greeter) {
+ * this.greeter = greeter;
+ * }
+ * }
+ * ```
+ */
+ bindings: any[];
+
+
+ /**
+ * Defines the name that can be used in the template to assign this directive to a variable.
+ *
+ * ## Simple Example
+ *
+ * ```
+ * @Directive({
+ * selector: 'child-dir',
+ * exportAs: 'child'
+ * })
+ * class ChildDir {
+ * }
+ *
+ * @Component({
+ * selector: 'main',
+ * })
+ * @View({
+ * template: ``,
+ * directives: [ChildDir]
+ * })
+ * class MainComponent {
+ * }
+ *
+ * ```
+ */
+ exportAs: string;
+ }
+
+
+ /**
+ * Declare reusable pipe function.
+ *
+ * ## Example
+ *
+ * ```
+ * @Pipe({
+ * name: 'lowercase'
+ * })
+ * class Lowercase {
+ * transform(v, args) { return v.toLowerCase(); }
+ * }
+ * ```
+ */
+ class PipeMetadata extends InjectableMetadata {
+
+ name: string;
+ }
+
+
+ /**
+ * Lifecycle events are guaranteed to be called in the following order:
+ * - `OnChanges` (if any bindings have changed),
+ * - `OnInit` (after the first check only),
+ * - `DoCheck`,
+ * - `AfterContentChecked`
+ * - `AfterContentChecked`
+ * - `OnDestroy` (at the very end before destruction)
+ */
+ enum LifecycleEvent {
+
+
+ /**
+ * Notify a directive when it has been checked the first time.
+ *
+ * This method is called right after the directive's bindings have been checked,
+ * and before any of its children's bindings have been checked.
+ *
+ * It is invoked only once.
+ *
+ * ## Example
+ *
+ * ```
+ * @Directive({
+ * selector: '[class-set]',
+ * lifecycle: [LifecycleEvent.OnInit]
+ * })
+ * class ClassSet {
+ * onInit() {
+ * }
+ * }
+ * ```
+ */
+ OnInit,
+
+
+ /**
+ * Notify a directive whenever a {@link ViewMetadata} that contains it is destroyed.
+ *
+ * ## Example
+ *
+ * ```
+ * @Directive({
+ * ...,
+ * lifecycle: [LifecycleEvent.OnDestroy]
+ * })
+ * class ClassSet {
+ * onDestroy() {
+ * // invoked to notify directive of the containing view destruction.
+ * }
+ * }
+ * ```
+ */
+ OnDestroy,
+
+
+ /**
+ * Notify a directive when any of its bindings have changed.
+ *
+ * This method is called right after the directive's bindings have been checked,
+ * and before any of its children's bindings have been checked.
+ *
+ * It is invoked only if at least one of the directive's bindings has changed.
+ *
+ * ## Example:
+ *
+ * ```
+ * @Directive({
+ * selector: '[class-set]',
+ * properties: [
+ * 'propA',
+ * 'propB'
+ * ],
+ * lifecycle: [LifecycleEvent.OnChanges]
+ * })
+ * class ClassSet {
+ * propA;
+ * propB;
+ * onChanges(changes:{[idx: string, PropertyUpdate]}) {
+ * // This will get called after any of the properties have been updated.
+ * if (changes['propA']) {
+ * // if propA was updated
+ * }
+ * if (changes['propA']) {
+ * // if propB was updated
+ * }
+ * }
+ * }
+ * ```
+ */
+ OnChanges,
+
+
+ /**
+ * Notify a directive when it has been checked.
+ *
+ * This method is called right after the directive's bindings have been checked,
+ * and before any of its children's bindings have been checked.
+ *
+ * It is invoked every time even when none of the directive's bindings has changed.
+ *
+ * ## Example
+ *
+ * ```
+ * @Directive({
+ * selector: '[class-set]',
+ * lifecycle: [LifecycleEvent.DoCheck]
+ * })
+ * class ClassSet {
+ * doCheck() {
+ * }
+ * }
+ * ```
+ */
+ DoCheck,
+
+
+ /**
+ * Notify a directive when the bindings of all its content children have been checked the first
+ * time (whether they
+ * have changed or not).
+ *
+ * ## Example
+ *
+ * ```
+ * @Directive({
+ * selector: '[class-set]',
+ * lifecycle: [LifecycleEvent.AfterContentInit]
+ * })
+ * class ClassSet {
+ *
+ * afterContentInit() {
+ * }
+ *
+ * }
+ * ```
+ */
+ AfterContentInit,
+
+
+ /**
+ * Notify a directive when the bindings of all its content children have been checked (whether
+ * they
+ * have changed or not).
+ *
+ * ## Example
+ *
+ * ```
+ * @Directive({
+ * selector: '[class-set]',
+ * lifecycle: [LifecycleEvent.AfterContentChecked]
+ * })
+ * class ClassSet {
+ *
+ * afterContentChecked() {
+ * }
+ *
+ * }
+ * ```
+ */
+ AfterContentChecked,
+
+
+ /**
+ * Notify a directive when the bindings of all its view children have been checked the first time
+ * (whether they
+ * have changed or not).
+ *
+ * ## Example
+ *
+ * ```
+ * @Directive({
+ * selector: '[class-set]',
+ * lifecycle: [LifecycleEvent.AfterViewInit]
+ * })
+ * class ClassSet {
+ *
+ * afterViewInit() {
+ * }
+ *
+ * }
+ * ```
+ */
+ AfterViewInit,
+
+
+ /**
+ * Notify a directive when the bindings of all its view children have been checked (whether they
+ * have changed or not).
+ *
+ * ## Example
+ *
+ * ```
+ * @Directive({
+ * selector: '[class-set]',
+ * lifecycle: [LifecycleEvent.AfterViewChecked]
+ * })
+ * class ClassSet {
+ *
+ * afterViewChecked() {
+ * }
+ *
+ * }
+ * ```
+ */
+ AfterViewChecked
+ }
+
+
+ /**
+ * Declares the available HTML templates for an application.
+ *
+ * Each angular component requires a single `@Component` and at least one `@View` annotation. The
+ * `@View` annotation specifies the HTML template to use, and lists the directives that are active
+ * within the template.
+ *
+ * When a component is instantiated, the template is loaded into the component's shadow root, and
+ * the expressions and statements in the template are evaluated against the component.
+ *
+ * For details on the `@Component` annotation, see {@link ComponentMetadata}.
+ *
+ * ## Example
+ *
+ * ```
+ * @Component({
+ * selector: 'greet'
+ * })
+ * @View({
+ * template: 'Hello {{name}}!',
+ * directives: [GreetUser, Bold]
+ * })
+ * class Greet {
+ * name: string;
+ *
+ * constructor() {
+ * this.name = 'World';
+ * }
+ * }
+ * ```
+ */
+ class ViewMetadata {
+
+
+ /**
+ * Specifies a template URL for an angular component.
+ *
+ * NOTE: either `templateUrl` or `template` should be used, but not both.
+ */
+ templateUrl: string;
+
+
+ /**
+ * Specifies an inline template for an angular component.
+ *
+ * NOTE: either `templateUrl` or `template` should be used, but not both.
+ */
+ template: string;
+
+
+ /**
+ * Specifies stylesheet URLs for an angular component.
+ */
+ styleUrls: string[];
+
+
+ /**
+ * Specifies an inline stylesheet for an angular component.
+ */
+ styles: string[];
+
+
+ /**
+ * Specifies a list of directives that can be used within a template.
+ *
+ * Directives must be listed explicitly to provide proper component encapsulation.
+ *
+ * ## Example
+ *
+ * ```javascript
+ * @Component({
+ * selector: 'my-component'
+ * })
+ * @View({
+ * directives: [For]
+ * template: '
+ * '
+ * })
+ * class MyComponent {
+ * }
+ * ```
+ */
+ directives: Array;
+
+ pipes: Array;
+
+
+ /**
+ * Specify how the template and the styles should be encapsulated.
+ * The default is {@link ViewEncapsulation#Emulated `ViewEncapsulation.Emulated`} if the view
+ * has styles,
+ * otherwise {@link ViewEncapsulation#None `ViewEncapsulation.None`}.
+ */
+ encapsulation: ViewEncapsulation;
+ }
+
+
+ /**
+ * How the template and styles of a view should be encapsulated.
+ */
+ enum ViewEncapsulation {
+
+
+ /**
+ * Emulate scoping of styles by preprocessing the style rules
+ * and adding additional attributes to elements. This is the default.
+ */
+ Emulated,
+
+
+ /**
+ * Uses the native mechanism of the renderer. For the DOM this means creating a ShadowRoot.
+ */
+ Native,
+
+
+ /**
+ * Don't scope the template nor the styles.
+ */
+ None
+ }
+
+
+ /**
+ * Specifies that a {@link QueryList} should be injected.
+ *
+ * See {@link QueryList} for usage and example.
+ */
+ class QueryMetadata extends DependencyMetadata {
+
+ descendants: boolean;
+
+ isViewQuery: any;
+
+ selector: any;
+
+ isVarBindingQuery: boolean;
+
+ varBindings: string[];
+
+ toString(): string;
+ }
+
+
+ /**
+ * Specifies that a constant attribute value should be injected.
+ *
+ * The directive can inject constant string literals of host element attributes.
+ *
+ * ## Example
+ *
+ * Suppose we have an `` element and want to know its `type`.
+ *
+ * ```html
+ *
+ * ```
+ *
+ * A decorator can inject string literal `text` like so:
+ *
+ * ```javascript
+ * @Directive({
+ * selector: `input'
+ * })
+ * class InputDirective {
+ * constructor(@Attribute('type') type) {
+ * // type would be `text` in this example
+ * }
+ * }
+ * ```
+ */
+ class AttributeMetadata extends DependencyMetadata {
+
+ attributeName: string;
+
+ token: any;
+
+ toString(): string;
+ }
+
+
+ /**
+ * {@link AttributeMetadata} factory function.
+ */
+ var Attribute : AttributeFactory ;
+
+
+ /**
+ * {@link AttributeMetadata} factory for creating annotations, decorators or DSL.
+ *
+ * ## Example as TypeScript Decorator
+ *
+ * ```
+ * import {Attribute, Component, View} from "angular2/angular2";
+ *
+ * @Component({...})
+ * @View({...})
+ * class MyComponent {
+ * constructor(@Attribute('title') title: string) {
+ * ...
+ * }
+ * }
+ * ```
+ *
+ * ## Example as ES5 DSL
+ *
+ * ```
+ * var MyComponent = ng
+ * .Component({...})
+ * .View({...})
+ * .Class({
+ * constructor: [new ng.Attribute('title'), function(title) {
+ * ...
+ * }]
+ * })
+ * ```
+ *
+ * ## Example as ES5 annotation
+ *
+ * ```
+ * var MyComponent = function(title) {
+ * ...
+ * };
+ *
+ * MyComponent.annotations = [
+ * new ng.Component({...}),
+ * new ng.View({...})
+ * ]
+ * MyComponent.parameters = [
+ * [new ng.Attribute('title')]
+ * ]
+ * ```
+ */
+ interface AttributeFactory {
+
+ new(name: string): AttributeMetadata;
+
+
+ (name: string): TypeDecorator;
+
+ }
+
+
+ /**
+ * {@link ComponentMetadata} factory function.
+ */
+ var Component : ComponentFactory ;
+
+
+ /**
+ * Interface for the {@link ComponentMetadata} decorator function.
+ *
+ * See {@link ComponentFactory}.
+ */
+ interface ComponentDecorator extends TypeDecorator {
+
+
+ /**
+ * Chain {@link ViewMetadata} annotation.
+ */
+ View(obj: {
+ templateUrl?: string,
+ template?: string,
+ directives?: Array,
+ pipes?: Array,
+ renderer?: string,
+ styles?: string[],
+ styleUrls?: string[],
+ }): ViewDecorator;
+ }
+
+
+ /**
+ * {@link ComponentAnnotation} factory for creating annotations, decorators or DSL.
+ *
+ * ## Example as TypeScript Decorator
+ *
+ * ```
+ * import {Component, View} from "angular2/angular2";
+ *
+ * @Component({...})
+ * @View({...})
+ * class MyComponent {
+ * constructor() {
+ * ...
+ * }
+ * }
+ * ```
+ *
+ * ## Example as ES5 DSL
+ *
+ * ```
+ * var MyComponent = ng
+ * .Component({...})
+ * .View({...})
+ * .Class({
+ * constructor: function() {
+ * ...
+ * }
+ * })
+ * ```
+ *
+ * ## Example as ES5 annotation
+ *
+ * ```
+ * var MyComponent = function() {
+ * ...
+ * };
+ *
+ * MyComponent.annotations = [
+ * new ng.Component({...}),
+ * new ng.View({...})
+ * ]
+ * ```
+ */
+ interface ComponentFactory {
+
+ new(obj: {
+ selector?: string,
+ properties?: string[],
+ events?: string[],
+ host?: StringMap,
+ lifecycle?: LifecycleEvent[],
+ bindings?: any[],
+ exportAs?: string,
+ compileChildren?: boolean,
+ viewBindings?: any[],
+ changeDetection?: ChangeDetectionStrategy,
+ }): ComponentMetadata;
+
+
+ (obj: {
+ selector?: string,
+ properties?: string[],
+ events?: string[],
+ host?: StringMap,
+ lifecycle?: LifecycleEvent[],
+ bindings?: any[],
+ exportAs?: string,
+ compileChildren?: boolean,
+ viewBindings?: any[],
+ changeDetection?: ChangeDetectionStrategy,
+ }): ComponentDecorator;
+
+ }
+
+
+ /**
+ * {@link DirectiveMetadata} factory function.
+ */
+ var Directive : DirectiveFactory ;
+
+
+ /**
+ * Interface for the {@link DirectiveMetadata} decorator function.
+ *
+ * See {@link DirectiveFactory}.
+ */
+ interface DirectiveDecorator extends TypeDecorator {
+ }
+
+
+ /**
+ * {@link DirectiveMetadata} factory for creating annotations, decorators or DSL.
+ *
+ * ## Example as TypeScript Decorator
+ *
+ * ```
+ * import {Directive} from "angular2/angular2";
+ *
+ * @Directive({...})
+ * class MyDirective {
+ * constructor() {
+ * ...
+ * }
+ * }
+ * ```
+ *
+ * ## Example as ES5 DSL
+ *
+ * ```
+ * var MyDirective = ng
+ * .Directive({...})
+ * .Class({
+ * constructor: function() {
+ * ...
+ * }
+ * })
+ * ```
+ *
+ * ## Example as ES5 annotation
+ *
+ * ```
+ * var MyDirective = function() {
+ * ...
+ * };
+ *
+ * MyDirective.annotations = [
+ * new ng.Directive({...})
+ * ]
+ * ```
+ */
+ interface DirectiveFactory {
+
+ new(obj: {
+ selector?: string, properties?: string[], events?: string[], host?: StringMap,
+ lifecycle?: LifecycleEvent[], bindings?: any[], exportAs?: string,
+ compileChildren?: boolean;
+ }): DirectiveMetadata;
+
+
+ (obj: {
+ selector?: string, properties?: string[], events?: string[], host?: StringMap,
+ lifecycle?: LifecycleEvent[], bindings?: any[], exportAs?: string,
+ compileChildren?: boolean;
+ }): DirectiveDecorator;
+
+ }
+
+
+ /**
+ * {@link ViewMetadata} factory function.
+ */
+ var View : ViewFactory ;
+
+
+ /**
+ * Interface for the {@link ViewMetadata} decorator function.
+ *
+ * See {@link ViewFactory}.
+ */
+ interface ViewDecorator extends TypeDecorator {
+
+
+ /**
+ * Chain {@link ViewMetadata} annotation.
+ */
+ View(obj: {
+ templateUrl?: string,
+ template?: string,
+ directives?: Array,
+ pipes?: Array,
+ renderer?: string,
+ styles?: string[],
+ styleUrls?: string[],
+ }): ViewDecorator;
+ }
+
+
+ /**
+ * {@link ViewAnnotation} factory for creating annotations, decorators or DSL.
+ *
+ * ## Example as TypeScript Decorator
+ *
+ * ```
+ * import {Component, View} from "angular2/angular2";
+ *
+ * @Component({...})
+ * @View({...})
+ * class MyComponent {
+ * constructor() {
+ * ...
+ * }
+ * }
+ * ```
+ *
+ * ## Example as ES5 DSL
+ *
+ * ```
+ * var MyComponent = ng
+ * .Component({...})
+ * .View({...})
+ * .Class({
+ * constructor: function() {
+ * ...
+ * }
+ * })
+ * ```
+ *
+ * ## Example as ES5 annotation
+ *
+ * ```
+ * var MyComponent = function() {
+ * ...
+ * };
+ *
+ * MyComponent.annotations = [
+ * new ng.Component({...}),
+ * new ng.View({...})
+ * ]
+ * ```
+ */
+ interface ViewFactory {
+
+ new(obj: {
+ templateUrl?: string,
+ template?: string,
+ directives?: Array,
+ encapsulation?: ViewEncapsulation,
+ styles?: string[],
+ styleUrls?: string[],
+ }): ViewMetadata;
+
+
+ (obj: {
+ templateUrl?: string,
+ template?: string,
+ directives?: Array,
+ encapsulation?: ViewEncapsulation,
+ styles?: string[],
+ styleUrls?: string[],
+ }): ViewDecorator;
+
+ }
+
+
+ /**
+ * {@link QueryMetadata} factory function.
+ */
+ var Query : QueryFactory ;
+
+
+ /**
+ * {@link QueryMetadata} factory for creating annotations, decorators or DSL.
+ *
+ * ## Example as TypeScript Decorator
+ *
+ * ```
+ * import {Query, QueryList, Component, View} from "angular2/angular2";
+ *
+ * @Component({...})
+ * @View({...})
+ * class MyComponent {
+ * constructor(@Query(SomeType) queryList: QueryList) {
+ * ...
+ * }
+ * }
+ * ```
+ *
+ * ## Example as ES5 DSL
+ *
+ * ```
+ * var MyComponent = ng
+ * .Component({...})
+ * .View({...})
+ * .Class({
+ * constructor: [new ng.Query(SomeType), function(queryList) {
+ * ...
+ * }]
+ * })
+ * ```
+ *
+ * ## Example as ES5 annotation
+ *
+ * ```
+ * var MyComponent = function(queryList) {
+ * ...
+ * };
+ *
+ * MyComponent.annotations = [
+ * new ng.Component({...}),
+ * new ng.View({...})
+ * ]
+ * MyComponent.parameters = [
+ * [new ng.Query(SomeType)]
+ * ]
+ * ```
+ */
+ interface QueryFactory {
+
+ new(selector: Type | string, {descendants}?: {descendants?: boolean}): QueryMetadata;
+
+
+ (selector: Type | string, {descendants}?: {descendants?: boolean}): ParameterDecorator;
+
+ }
+
+
+ /**
+ * {@link di/ViewQueryMetadata} factory function.
+ */
+ var ViewQuery : QueryFactory ;
+
+
+ /**
+ * {@link PipeMetadata} factory function.
+ */
+ var Pipe : PipeFactory ;
+
+
+ /**
+ * {@link PipeMetadata} factory for creating decorators.
+ *
+ * ## Example as TypeScript Decorator
+ *
+ * ```
+ * import {Pipe} from "angular2/angular2";
+ *
+ * @Pipe({...})
+ * class MyPipe {
+ * constructor() {
+ * ...
+ * }
+ *
+ * transform(v, args) {}
+ * }
+ * ```
+ */
+ interface PipeFactory {
+
+ new(obj: {
+ name: string,
+ }): any;
+
+
+ (obj: {name: string}): any;
+
+ }
+
+
+ /**
+ * Defines lifecycle method
+ * {@link metadata/LifeCycleEvent#AfterContentInit `LifeCycleEvent.afterContentInit`}
+ * called when the bindings of all its content children have been checked the first time.
+ */
+ interface AfterContentInit {
+
+ afterContentInit(): void;
+ }
+
+
+ /**
+ * Defines lifecycle method
+ * {@link metadata/LifeCycleEvent#AfterContentChecked `LifeCycleEvent.afterContentChecked`}
+ * called when the bindings of all its content children have been checked.
+ */
+ interface AfterContentChecked {
+
+ afterContentChecked(): void;
+ }
+
+
+ /**
+ * Defines lifecycle method
+ * {@link metadata/LifeCycleEvent#AfterViewInit `LifeCycleEvent.afterViewInit`}
+ * called when the bindings of all its view children have been checked the first time.
+ */
+ interface AfterViewInit {
+
+ afterViewInit(): void;
+ }
+
+
+ /**
+ * Defines lifecycle method
+ * {@link metadata/LifeCycleEvent#AfterViewChecked `LifeCycleEvent.afterViewChecked`}
+ * called when the bindings of all its view children have been checked.
+ */
+ interface AfterViewChecked {
+
+ afterViewChecked(): void;
+ }
+
+
+ /**
+ * Defines lifecycle method {@link metadata/LifeCycleEvent#OnChanges `LifeCycleEvent.OnChanges`}
+ * called after all of component's bound properties are updated.
+ */
+ interface OnChanges {
+
+ onChanges(changes: StringMap): void;
+ }
+
+
+ /**
+ * Defines lifecycle method {@link metadata/LifeCycleEvent#OnDestroy `LifeCycleEvent.OnDestroy`}
+ * called when a directive is being destroyed.
+ */
+ interface OnDestroy {
+
+ onDestroy(): void;
+ }
+
+
+ /**
+ * Defines lifecycle method {@link metadata/LifeCycleEvent#OnInit `LifeCycleEvent.OnInit`}
+ * called when a directive is being checked the first time.
+ */
+ interface OnInit {
+
+ onInit(): void;
+ }
+
+
+ /**
+ * Defines lifecycle method {@link metadata/LifeCycleEvent#DoCheck `LifeCycleEvent.DoCheck`}
+ * called when a directive is being checked.
+ */
+ interface DoCheck {
+
+ doCheck(): boolean;
+ }
+
+
+ /**
+ * Provides a way for expressing ES6 classes with parameter annotations in ES5.
+ *
+ * ## Basic Example
+ *
+ * ```
+ * var Greeter = ng.Class({
+ * constructor: function(name) {
+ * this.name = name;
+ * },
+ *
+ * greet: function() {
+ * alert('Hello ' + this.name + '!');
+ * }
+ * });
+ * ```
+ *
+ * is equivalent to ES6:
+ *
+ * ```
+ * class Greeter {
+ * constructor(name) {
+ * this.name = name;
+ * }
+ *
+ * greet() {
+ * alert('Hello ' + this.name + '!');
+ * }
+ * }
+ * ```
+ *
+ * or equivalent to ES5:
+ *
+ * ```
+ * var Greeter = function (name) {
+ * this.name = name;
+ * }
+ *
+ * Greeter.prototype.greet = function () {
+ * alert('Hello ' + this.name + '!');
+ * }
+ * ```
+ *
+ * ## Example with parameter annotations
+ *
+ * ```
+ * var MyService = neg.Class({
+ * constructor: [String, [new Query(), QueryList], function(name, queryList) {
+ * ...
+ * }];
+ * });
+ * ```
+ *
+ * is equivalent to ES6:
+ *
+ * ```
+ * class MyService {
+ * constructor(name: string, @Query() queryList: QueryList) {
+ * ...
+ * }
+ * }
+ * ```
+ *
+ * ## Example with inheritance
+ *
+ * ```
+ * var Shape = ng.Class({
+ * constructor: (color) {
+ * this.color = color;
+ * }
+ * });
+ *
+ * var Square = ng.Class({
+ * extends: Shape,
+ * constructor: function(color, size) {
+ * Shape.call(this, color);
+ * this.size = size;
+ * }
+ * });
+ * ```
+ */
+ function Class(clsDef: ClassDefinition) : Type ;
+
+
+ /**
+ * Declares the interface to be used with {@link Class}.
+ */
+ interface ClassDefinition {
+
+
+ /**
+ * Optional argument for specifying the superclass.
+ */
+ extends?: Type;
+
+
+ /**
+ * Required constructor function for a class.
+ *
+ * The function may be optionally wrapped in an `Array`, in which case additional parameter
+ * annotations may be specified.
+ * The number of arguments and the number of parameter annotations must match.
+ *
+ * See {@link Class} for example of usage.
+ */
+ constructor: (Function | any[]);
+ }
+
+
+ /**
+ * An interface implemented by all Angular type decorators, which allows them to be used as ES7
+ * decorators as well as
+ * Angular DSL syntax.
+ *
+ * DSL syntax:
+ *
+ * ```
+ * var MyClass = ng
+ * .Component({...})
+ * .View({...})
+ * .Class({...});
+ * ```
+ *
+ * ES7 syntax:
+ *
+ * ```
+ * @ng.Component({...})
+ * @ng.View({...})
+ * class MyClass {...}
+ * ```
+ */
+ interface TypeDecorator {
+
+
+ /**
+ * Invoke as ES7 decorator.
+ */
+ (type: T): T;
+
+
+
+ /**
+ * Storage for the accumulated annotations so far used by the DSL syntax.
+ *
+ * Used by {@link Class} to annotate the generated class.
+ */
+ annotations: any[];
+
+
+ /**
+ * Generate a class from the definition and annotate it with {@link TypeDecorator#annotations}.
+ */
+ Class(obj: ClassDefinition): Type;
+ }
+
+ enum ChangeDetectionStrategy {
+
+
+ /**
+ * `CheckedOnce` means that after calling detectChanges the mode of the change detector
+ * will become `Checked`.
+ */
+ CheckOnce,
+
+
+ /**
+ * `Checked` means that the change detector should be skipped until its mode changes to
+ * `CheckOnce`.
+ */
+ Checked,
+
+
+ /**
+ * `CheckAlways` means that after calling detectChanges the mode of the change detector
+ * will remain `CheckAlways`.
+ */
+ CheckAlways,
+
+
+ /**
+ * `Detached` means that the change detector sub tree is not a part of the main tree and
+ * should be skipped.
+ */
+ Detached,
+
+
+ /**
+ * `OnPush` means that the change detector's mode will be set to `CheckOnce` during hydration.
+ */
+ OnPush,
+
+
+ /**
+ * `Default` means that the change detector's mode will be set to `CheckAlways` during hydration.
+ */
+ Default,
+
+
+ /**
+ * This is an experimental feature. Works only in Dart.
+ */
+ OnPushObserve
+ }
+
+
+ /**
+ * An error thrown if application changes model breaking the top-down data flow.
+ *
+ * Angular expects that the data flows from top (root) component to child (leaf) components.
+ * This is known as directed acyclic graph. This allows Angular to only execute change detection
+ * once and prevents loops in change detection data flow.
+ *
+ * This exception is only thrown in dev mode.
+ */
+ class ExpressionChangedAfterItHasBeenCheckedException extends BaseException {
+ }
+
+
+ /**
+ * Thrown when an expression evaluation raises an exception.
+ *
+ * This error wraps the original exception, this is done to attach expression location information.
+ */
+ class ChangeDetectionError extends BaseException {
+
+
+ /**
+ * Location of the expression.
+ */
+ location: string;
+ }
+
+ interface ChangeDetector {
+
+ parent: ChangeDetector;
+
+ mode: ChangeDetectionStrategy;
+
+ ref: ChangeDetectorRef;
+
+ addChild(cd: ChangeDetector): void;
+
+ addShadowDomChild(cd: ChangeDetector): void;
+
+ removeChild(cd: ChangeDetector): void;
+
+ removeShadowDomChild(cd: ChangeDetector): void;
+
+ remove(): void;
+
+ hydrate(context: any, locals: Locals, directives: any, pipes: any): void;
+
+ dehydrate(): void;
+
+ markPathToRootAsCheckOnce(): void;
+
+ handleEvent(eventName: string, elIndex: number, locals: Locals): void;
+
+ detectChanges(): void;
+
+ checkNoChanges(): void;
+ }
+
+ class Locals {
+
+ parent: Locals;
+
+ current: Map;
+
+ contains(name: string): boolean;
+
+ get(name: string): any;
+
+ set(name: string, value: any): void;
+
+ clearValues(): void;
+ }
+
+
+ /**
+ * Controls change detection.
+ *
+ * {@link ChangeDetectorRef} allows requesting checks for detectors that rely on observables. It
+ * also allows detaching and attaching change detector subtrees.
+ */
+ interface ChangeDetectorRef {
+
+
+ /**
+ * Request to check all OnPush ancestors.
+ */
+ markForCheck(): void;
+
+
+ /**
+ * Detaches the change detector from the change detector tree.
+ *
+ * The detached change detector will not be checked until it is reattached.
+ */
+ detach(): void;
+
+
+ /**
+ * Reattach the change detector to the change detector tree.
+ *
+ * This also requests a check of this change detector. This reattached change detector will be
+ * checked during the next change detection run.
+ */
+ reattach(): void;
+ }
+
+
+ /**
+ * Indicates that the result of a {@link PipeMetadata} transformation has changed even though the
+ * reference
+ * has not changed.
+ *
+ * The wrapped value will be unwrapped by change detection, and the unwrapped value will be stored.
+ *
+ * Example:
+ *
+ * ```
+ * if (this._latestValue === this._latestReturnedValue) {
+ * return this._latestReturnedValue;
+ * } else {
+ * this._latestReturnedValue = this._latestValue;
+ * return WrappedValue.wrap(this._latestValue); // this will force update
+ * }
+ * ```
+ */
+ class WrappedValue {
+
+ static wrap(value: any): WrappedValue;
+
+ wrapped: any;
+ }
+
+
+ /**
+ * An interface which all pipes must implement.
+ *
+ * #Example
+ *
+ * ```
+ * class DoublePipe implements PipeTransform {
+ * transform(value, args = []) {
+ * return `${value}${value}`;
+ * }
+ * }
+ * ```
+ */
+ interface PipeTransform {
+
+ transform(value: any, args: any[]): any;
+ }
+
+
+ /**
+ * An interface that stateful pipes should implement.
+ *
+ * #Example
+ *
+ * ```
+ * class StatefulPipe implements PipeTransform, PipeOnDestroy {
+ * connection;
+ *
+ * onDestroy() {
+ * this.connection.release();
+ * }
+ *
+ * transform(value, args = []) {
+ * this.connection = createConnection();
+ * // ...
+ * return someValue;
+ * }
+ * }
+ * ```
+ */
+ interface PipeOnDestroy {
+
+ onDestroy(): void;
+ }
+
+
+ /**
+ * A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
+ */
+ class IterableDiffers {
+
+ static create(factories: IterableDifferFactory[], parent?: IterableDiffers): IterableDiffers;
+
+
+ /**
+ * Takes an array of {@link IterableDifferFactory} and returns a binding used to extend the
+ * inherited {@link IterableDiffers} instance with the provided factories and return a new
+ * {@link IterableDiffers} instance.
+ *
+ * The following example shows how to extend an existing list of factories,
+ * which will only be applied to the injector for this component and its children.
+ * This step is all that's required to make a new {@link IterableDiffer} available.
+ *
+ * # Example
+ *
+ * ```
+ * @Component({
+ * viewBindings: [
+ * IterableDiffers.extend([new ImmutableListDiffer()])
+ * ]
+ * })
+ * ```
+ */
+ static extend(factories: IterableDifferFactory[]): Binding;
+
+ factories: IterableDifferFactory[];
+
+ find(iterable: Object): IterableDifferFactory;
+ }
+
+ interface IterableDiffer {
+
+ diff(object: Object): any;
+
+ onDestroy(): void;
+ }
+
+
+ /**
+ * Provides a factory for {@link IterableDiffer}.
+ */
+ interface IterableDifferFactory {
+
+ supports(objects: Object): boolean;
+
+ create(cdRef: ChangeDetectorRef): IterableDiffer;
+ }
+
+
+ /**
+ * A repository of different Map diffing strategies used by NgClass, NgStyle, and others.
+ */
+ class KeyValueDiffers {
+
+ static create(factories: KeyValueDifferFactory[], parent?: KeyValueDiffers): KeyValueDiffers;
+
+
+ /**
+ * Takes an array of {@link KeyValueDifferFactory} and returns a binding used to extend the
+ * inherited {@link KeyValueDiffers} instance with the provided factories and return a new
+ * {@link KeyValueDiffers} instance.
+ *
+ * The following example shows how to extend an existing list of factories,
+ * which will only be applied to the injector for this component and its children.
+ * This step is all that's required to make a new {@link KeyValueDiffer} available.
+ *
+ * # Example
+ *
+ * ```
+ * @Component({
+ * viewBindings: [
+ * KeyValueDiffers.extend([new ImmutableMapDiffer()])
+ * ]
+ * })
+ * ```
+ */
+ static extend(factories: KeyValueDifferFactory[]): Binding;
+
+ factories: KeyValueDifferFactory[];
+
+ find(kv: Object): KeyValueDifferFactory;
+ }
+
+ interface KeyValueDiffer {
+
+ diff(object: Object): void;
+
+ onDestroy(): void;
+ }
+
+
+ /**
+ * Provides a factory for {@link KeyValueDiffer}.
+ */
+ interface KeyValueDifferFactory {
+
+ supports(objects: Object): boolean;
+
+ create(cdRef: ChangeDetectorRef): KeyValueDiffer;
+ }
+
+
+ /**
+ * An opaque token representing the application root type in the {@link Injector}.
+ *
+ * ```
+ * @Component(...)
+ * @View(...)
+ * class MyApp {
+ * ...
+ * }
+ *
+ * bootstrap(MyApp).then((appRef:ApplicationRef) {
+ * expect(appRef.injector.get(appComponentTypeToken)).toEqual(MyApp);
+ * });
+ *
+ * ```
+ */
+ const APP_COMPONENT : OpaqueToken ;
+
+
+ /**
+ * Runtime representation of a type.
+ *
+ * In JavaScript a Type is a constructor function.
+ */
+ interface Type extends Function {
+
+ new(...args: any[]): any;
+
+ }
+
+
+ /**
+ * Represents a Angular's representation of an Application.
+ *
+ * `ApplicationRef` represents a running application instance. Use it to retrieve the host
+ * component, injector,
+ * or dispose of an application.
+ */
+ interface ApplicationRef {
+
+
+ /**
+ * Returns the current {@link ComponentMetadata} type.
+ */
+ hostComponentType: Type;
+
+
+ /**
+ * Returns the current {@link ComponentMetadata} instance.
+ */
+ hostComponent: any;
+
+
+ /**
+ * Dispose (un-load) the application.
+ */
+ dispose(): void;
+
+
+ /**
+ * Returns the root application {@link Injector}.
+ */
+ injector: Injector;
+ }
+
+
+ /**
+ * Specifies app root url for the application.
+ *
+ * Used by the {@link Compiler} when resolving HTML and CSS template URLs.
+ *
+ * This interface can be overridden by the application developer to create custom behavior.
+ *
+ * See {@link Compiler}
+ */
+ class AppRootUrl {
+
+
+ /**
+ * Returns the base URL of the currently running application.
+ */
+ value: any;
+ }
+
+
+ /**
+ * Used by the {@link Compiler} when resolving HTML and CSS template URLs.
+ *
+ * This interface can be overridden by the application developer to create custom behavior.
+ *
+ * See {@link Compiler}
+ */
+ class UrlResolver {
+
+
+ /**
+ * Resolves the `url` given the `baseUrl`:
+ * - when the `url` is null, the `baseUrl` is returned,
+ * - if `url` is relative ('path/to/here', './path/to/here'), the resolved url is a combination of
+ * `baseUrl` and `url`,
+ * - if `url` is absolute (it has a scheme: 'http://', 'https://' or start with '/'), the `url` is
+ * returned as is (ignoring the `baseUrl`)
+ *
+ * @param {string} baseUrl
+ * @param {string} url
+ * @returns {string} the resolved URL
+ */
+ resolve(baseUrl: string, url: string): string;
+ }
+
+
+ /**
+ * Resolve a `Type` from a {@link ComponentMetadata} into a URL.
+ *
+ * This interface can be overridden by the application developer to create custom behavior.
+ *
+ * See {@link Compiler}
+ */
+ class ComponentUrlMapper {
+
+
+ /**
+ * Returns the base URL to the component source file.
+ * The returned URL could be:
+ * - an absolute URL,
+ * - a path relative to the application
+ */
+ getUrl(component: Type): string;
+ }
+
+
+ /**
+ * Resolve a `Type` for {@link DirectiveMetadata}.
+ *
+ * This interface can be overridden by the application developer to create custom behavior.
+ *
+ * See {@link Compiler}
+ */
+ class DirectiveResolver {
+
+
+ /**
+ * Return {@link DirectiveMetadata} for a given `Type`.
+ */
+ resolve(type: Type): DirectiveMetadata;
+ }
+
+
+ /**
+ * ## URL Resolution
+ *
+ * ```
+ * var appRootUrl: AppRootUrl = ...;
+ * var componentUrlMapper: ComponentUrlMapper = ...;
+ * var urlResolver: UrlResolver = ...;
+ *
+ * var componentType: Type = ...;
+ * var componentAnnotation: ComponentAnnotation = ...;
+ * var viewAnnotation: ViewAnnotation = ...;
+ *
+ * // Resolving a URL
+ *
+ * var url = viewAnnotation.templateUrl;
+ * var componentUrl = componentUrlMapper.getUrl(componentType);
+ * var componentResolvedUrl = urlResolver.resolve(appRootUrl.value, componentUrl);
+ * var templateResolvedUrl = urlResolver.resolve(componetResolvedUrl, url);
+ * ```
+ */
+ interface Compiler {
+
+ compileInHost(componentTypeOrBinding: Type | Binding): Promise;
+ }
+
+
+ /**
+ * Entry point for creating, moving views in the view hierarchy and destroying views.
+ * This manager contains all recursion and delegates to helper methods
+ * in AppViewManagerUtils and the Renderer, so unit tests get simpler.
+ */
+ interface AppViewManager {
+
+
+ /**
+ * Returns a {@link ViewContainerRef} at the {@link ElementRef} location.
+ */
+ getViewContainer(location: ElementRef): ViewContainerRef;
+
+
+ /**
+ * Return the first child element of the host element view.
+ */
+ getHostElement(hostViewRef: HostViewRef): ElementRef;
+
+
+ /**
+ * Returns an ElementRef for the element with the given variable name
+ * in the current view.
+ *
+ * - `hostLocation`: {@link ElementRef} of any element in the View which defines the scope of
+ * search.
+ * - `variableName`: Name of the variable to locate.
+ * - Returns {@link ElementRef} of the found element or null. (Throws if not found.)
+ */
+ getNamedElementInComponentView(hostLocation: ElementRef, variableName: string): ElementRef;
+
+
+ /**
+ * Returns the component instance for a given element.
+ *
+ * The component is the execution context as seen by an expression at that {@link ElementRef}
+ * location.
+ */
+ getComponent(hostLocation: ElementRef): any;
+
+
+ /**
+ * Load component view into existing element.
+ *
+ * Use this if a host element is already in the DOM and it is necessary to upgrade
+ * the element into Angular component by attaching a view but reusing the existing element.
+ *
+ * - `hostProtoViewRef`: {@link ProtoViewRef} Proto view to use in creating a view for this
+ * component.
+ * - `overrideSelector`: (optional) selector to use in locating the existing element to load
+ * the view into. If not specified use the selector in the component definition of the
+ * `hostProtoView`.
+ * - injector: {@link Injector} to use as parent injector for the view.
+ *
+ * See {@link AppViewManager#destroyRootHostView}.
+ *
+ * ## Example
+ *
+ * ```
+ * @ng.Component({
+ * selector: 'child-component'
+ * })
+ * @ng.View({
+ * template: 'Child'
+ * })
+ * class ChildComponent {
+ *
+ * }
+ *
+ * @ng.Component({
+ * selector: 'my-app'
+ * })
+ * @ng.View({
+ * template: `
+ * Parent ()
+ * `
+ * })
+ * class MyApp {
+ * viewRef: ng.ViewRef;
+ *
+ * constructor(public appViewManager: ng.AppViewManager, compiler: ng.Compiler) {
+ * compiler.compileInHost(ChildComponent).then((protoView: ng.ProtoViewRef) => {
+ * this.viewRef = appViewManager.createRootHostView(protoView, 'some-component', null);
+ * })
+ * }
+ *
+ * onDestroy() {
+ * this.appViewManager.destroyRootHostView(this.viewRef);
+ * this.viewRef = null;
+ * }
+ * }
+ *
+ * ng.bootstrap(MyApp);
+ * ```
+ */
+ createRootHostView(hostProtoViewRef: ProtoViewRef, overrideSelector: string, injector: Injector): HostViewRef;
+
+
+ /**
+ * Remove the View created with {@link AppViewManager#createRootHostView}.
+ */
+ destroyRootHostView(hostViewRef: HostViewRef): void;
+
+
+ /**
+ * See {@link AppViewManager#destroyViewInContainer}.
+ */
+ createEmbeddedViewInContainer(viewContainerLocation: ElementRef, atIndex: number, templateRef: TemplateRef): ViewRef;
+
+
+ /**
+ * See {@link AppViewManager#destroyViewInContainer}.
+ */
+ createHostViewInContainer(viewContainerLocation: ElementRef, atIndex: number, protoViewRef: ProtoViewRef, imperativelyCreatedInjector: ResolvedBinding[]): HostViewRef;
+
+
+ /**
+ * See {@link AppViewManager#createViewInContainer}.
+ */
+ destroyViewInContainer(viewContainerLocation: ElementRef, atIndex: number): void;
+
+
+ /**
+ * See {@link AppViewManager#detachViewInContainer}.
+ */
+ attachViewInContainer(viewContainerLocation: ElementRef, atIndex: number, viewRef: ViewRef): ViewRef;
+
+
+ /**
+ * See {@link AppViewManager#attachViewInContainer}.
+ */
+ detachViewInContainer(viewContainerLocation: ElementRef, atIndex: number): ViewRef;
+ }
+
+
+ /**
+ * An iterable and observable live list of components in the DOM.
+ *
+ * A QueryList contains a live list of child directives in the DOM of a directive.
+ * The directives are kept in depth-first pre-order traversal of the DOM.
+ *
+ * The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop
+ * as well as in template with `*ng-for="of"` directive.
+ *
+ * QueryList is updated as part of the change-detection cycle of a directive. Since change detection
+ * happens after construction of a directive, QueryList will always be empty when observed in the
+ * constructor.
+ *
+ *
+ * NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain
+ * list of observable callbacks.
+ *
+ * # Example:
+ *
+ * Assume that `` component would like to get a list its children which are ``
+ * components as shown in this example:
+ *
+ * ```html
+ *
+ * ...
+ * {{o.text}}
+ *
+ * ```
+ *
+ * In the above example the list of `` elements needs to get a list of `` elements so
+ * that it could render tabs with the correct titles and in the correct order.
+ *
+ * A possible solution would be for a `` to inject `