` ) will ensure that this element will get the "button" role.
*
* ```typescript
* @Directive({
* selector: '[my-button]',
* host: {
* 'role': 'button'
* }
* })
* class MyButton {
* }
* ```
*/
host: {[key: string]: string};
/**
* 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;
/**
* The module id of the module that contains the directive.
* Needed to be able to resolve relative urls for templates and styles.
* In Dart, this can be determined automatically and does not need to be set.
* In CommonJS, this can always be set to `module.id`.
*
* ## Simple Example
*
* ```
* @Directive({
* selector: 'someDir',
* moduleId: module.id
* })
* class SomeDir {
* }
*
* ```
*/
moduleId: string;
/**
* Configures the queries that will be injected into the directive.
*
* Content queries are set before the `afterContentInit` callback is called.
* View queries are set before the `afterViewInit` callback is called.
*
* ### Example
*
* ```
* @Component({
* selector: 'someDir',
* queries: {
* contentChildren: new ContentChildren(ChildDirective),
* viewChildren: new ViewChildren(ChildDirective)
* }
* })
* @View({
* template: '
',
* directives: [ChildDirective]
* })
* class SomeDir {
* contentChildren: QueryList
,
* viewChildren: QueryList
*
* afterContentInit() {
* // contentChildren is set
* }
*
* afterViewInit() {
* // viewChildren is set
* }
* }
* ```
*/
queries: {[key: string]: any};
}
/**
* Declare reusable pipe function.
*
* ## Example
*
* ```
* @Pipe({
* name: 'lowercase'
* })
* class Lowercase {
* transform(v, args) { return v.toLowerCase(); }
* }
* ```
*/
class PipeMetadata extends InjectableMetadata {
constructor({name, pure}: {name: string, pure: boolean});
name: string;
pure: boolean;
}
/**
* Declares a data-bound input property.
*
* Angular automatically updates data-bound properties during change detection.
*
* `InputMetadata` takes an optional parameter that specifies the name
* used when instantiating a component in the template. When not provided,
* the name of the decorated property is used.
*
* ### Example
*
* The following example creates a component with two input properties.
*
* ```typescript
* @Component({selector: 'bank-account'})
* @View({
* template: `
* Bank Name: {{bankName}}
* Account Id: {{id}}
* `
* })
* class BankAccount {
* @Input() bankName: string;
* @Input('account-id') id: string;
*
* // this property is not bound, and won't be automatically updated by Angular
* normalizedBankName: string;
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
*
*
* `,
* directives: [IntervalDir]
* })
* class App {
* everySecond() { console.log('second'); }
* everyFiveSeconds() { console.log('five seconds'); }
* }
* bootstrap(App);
* ```
*/
class OutputMetadata {
constructor(bindingPropertyName?: string);
bindingPropertyName: string;
}
/**
* Declares a host property binding.
*
* Angular automatically checks host property bindings during change detection.
* If a binding changes, it will update the host element of the directive.
*
* `HostBindingMetadata` takes an optional parameter that specifies the property
* name of the host element that will be updated. When not provided,
* the class property name is used.
*
* ### Example
*
* The following example creates a directive that sets the `valid` and `invalid` classes
* on the DOM element that has ng-model directive on it.
*
* ```typescript
* @Directive({selector: '[ng-model]'})
* class NgModelStatus {
* constructor(public control:NgModel) {}
* @HostBinding('[class.valid]') get valid { return this.control.valid; }
* @HostBinding('[class.invalid]') get invalid { return this.control.invalid; }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `Increment `,
* directives: [CountClicks]
* })
* class App {}
*
* bootstrap(App);
* ```
*/
class HostListenerMetadata {
constructor(eventName: string, args?: string[]);
eventName: string;
args: string[];
}
/**
* Metadata properties available for configuring Views.
*
* 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 {
constructor({templateUrl, template, directives, pipes, encapsulation, styles, styleUrls}?: {
templateUrl?: string,
template?: string,
directives?: Array,
pipes?: Array,
encapsulation?: ViewEncapsulation,
styles?: string[],
styleUrls?: string[],
});
/**
* Specifies a template URL for an Angular component.
*
* NOTE: Only one of `templateUrl` or `template` can be defined per View.
*
*
*/
templateUrl: string;
/**
* Specifies an inline template for an Angular component.
*
* NOTE: Only one of `templateUrl` or `template` can be defined per View.
*/
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: [NgFor]
* 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;
}
/**
* Defines template and style encapsulation options available for Component's {@link View}.
*
* See {@link ViewMetadata#encapsulation}.
*/
enum ViewEncapsulation {
/**
* Emulate `Native` scoping of styles by adding an attribute containing surrogate id to the Host
* Element and pre-processing the style rules provided via
* {@link ViewMetadata#styles} or {@link ViewMetadata#stylesUrls}, and adding the new Host Element
* attribute to all selectors.
*
* This is the default option.
*/
Emulated,
/**
* Use the native encapsulation mechanism of the renderer.
*
* For the DOM this means using [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) and
* creating a ShadowRoot for Component's Host Element.
*/
Native,
/**
* Don't provide any template or style encapsulation.
*/
None
}
/**
* Interface for the {@link DirectiveMetadata} decorator function.
*
* See {@link DirectiveFactory}.
*/
interface DirectiveDecorator extends TypeDecorator {
}
/**
* 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;
}
/**
* 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 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,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
queries?: {[key: string]: any}
}): DirectiveMetadata;
(obj: {
selector?: string,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
queries?: {[key: string]: any}
}): DirectiveDecorator;
}
/**
* {@link ComponentMetadata} 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,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
queries?: {[key: string]: any},
viewBindings?: any[],
changeDetection?: ChangeDetectionStrategy,
}): ComponentMetadata;
(obj: {
selector?: string,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
queries?: {[key: string]: any},
viewBindings?: any[],
changeDetection?: ChangeDetectionStrategy,
}): ComponentDecorator;
}
/**
* {@link ViewMetadata} 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,
pipes?: Array,
encapsulation?: ViewEncapsulation,
styles?: string[],
styleUrls?: string[],
}): ViewMetadata;
(obj: {
templateUrl?: string,
template?: string,
directives?: Array,
pipes?: Array,
encapsulation?: ViewEncapsulation,
styles?: string[],
styleUrls?: string[],
}): ViewDecorator;
}
/**
* {@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 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;
}
interface ContentChildrenFactory {
new(selector: Type | string, {descendants}?: {descendants?: boolean}): ContentChildrenMetadata;
(selector: Type | string, {descendants}?: {descendants?: boolean}): any;
}
interface ContentChildFactory {
new(selector: Type | string): ContentChildFactory;
(selector: Type | string): any;
}
interface ViewChildrenFactory {
new(selector: Type | string): ViewChildrenMetadata;
(selector: Type | string): any;
}
interface ViewChildFactory {
new(selector: Type | string): ViewChildFactory;
(selector: Type | string): any;
}
/**
* {@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, pure?: boolean}): any;
(obj: {name: string, pure?: boolean}): any;
}
/**
* {@link InputMetadata} factory for creating decorators.
*
* See {@link InputMetadata}.
*/
interface InputFactory {
new(bindingPropertyName?: string): any;
(bindingPropertyName?: string): any;
}
/**
* {@link OutputMetadata} factory for creating decorators.
*
* See {@link OutputMetadata}.
*/
interface OutputFactory {
new(bindingPropertyName?: string): any;
(bindingPropertyName?: string): any;
}
/**
* {@link HostBindingMetadata} factory function.
*/
interface HostBindingFactory {
new(hostPropertyName?: string): any;
(hostPropertyName?: string): any;
}
/**
* {@link HostListenerMetadata} factory function.
*/
interface HostListenerFactory {
new(eventName: string, args?: string[]): any;
(eventName: string, args?: string[]): any;
}
/**
* {@link ComponentMetadata} factory function.
*/
var Component: ComponentFactory;
/**
* {@link DirectiveMetadata} factory function.
*/
var Directive: DirectiveFactory;
/**
* {@link ViewMetadata} factory function.
*/
var View: ViewFactory;
/**
* {@link AttributeMetadata} factory function.
*/
var Attribute: AttributeFactory;
/**
* {@link QueryMetadata} factory function.
*/
var Query: QueryFactory;
/**
* {@link ContentChildrenMetadata} factory function.
*/
var ContentChildren: ContentChildrenFactory;
/**
* {@link ContentChildMetadata} factory function.
*/
var ContentChild: ContentChildFactory;
/**
* {@link ViewChildrenMetadata} factory function.
*/
var ViewChildren: ViewChildrenFactory;
/**
* {@link ViewChildMetadata} factory function.
*/
var ViewChild: ViewChildFactory;
/**
* {@link di/ViewQueryMetadata} factory function.
*/
var ViewQuery: QueryFactory;
/**
* {@link PipeMetadata} factory function.
*/
var Pipe: PipeFactory;
/**
* {@link InputMetadata} factory function.
*
* See {@link InputMetadata}.
*/
var Input: InputFactory;
/**
* {@link OutputMetadata} factory function.
*
* See {@link OutputMetadatas}.
*/
var Output: OutputFactory;
/**
* {@link HostBindingMetadata} factory function.
*/
var HostBinding: HostBindingFactory;
/**
* {@link HostListenerMetadata} factory function.
*/
var HostListener: HostListenerFactory;
/**
* 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 = ng.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;
}
/**
* A parameter metadata that specifies a dependency.
*
* ### Example ([live demo](http://plnkr.co/edit/6uHYJK?p=preview))
*
* ```typescript
* class Engine {}
*
* @Injectable()
* class Car {
* engine;
* constructor(@Inject("MyEngine") engine:Engine) {
* this.engine = engine;
* }
* }
*
* var injector = Injector.resolveAndCreate([
* bind("MyEngine").toClass(Engine),
* Car
* ]);
*
* expect(injector.get(Car).engine instanceof Engine).toBe(true);
* ```
*
* When `@Inject()` is not present, {@link Injector} will use the type annotation of the parameter.
*
* ### Example
*
* ```typescript
* class Engine {}
*
* @Injectable()
* class Car {
* constructor(public engine: Engine) {} //same as constructor(@Inject(Engine) engine:Engine)
* }
*
* var injector = Injector.resolveAndCreate([Engine, Car]);
* expect(injector.get(Car).engine instanceof Engine).toBe(true);
* ```
*/
class InjectMetadata {
constructor(token: any);
token: any;
toString(): string;
}
/**
* A parameter metadata that marks a dependency as optional. {@link Injector} provides `null` if
* the dependency is not found.
*
* ### Example ([live demo](http://plnkr.co/edit/AsryOm?p=preview))
*
* ```typescript
* class Engine {}
*
* @Injectable()
* class Car {
* engine;
* constructor(@Optional() engine:Engine) {
* this.engine = engine;
* }
* }
*
* var injector = Injector.resolveAndCreate([Car]);
* expect(injector.get(Car).engine).toBeNull();
* ```
*/
class OptionalMetadata {
toString(): string;
}
/**
* A marker metadata that marks a class as available to {@link Injector} for creation.
*
* ### Example ([live demo](http://plnkr.co/edit/Wk4DMQ?p=preview))
*
* ```typescript
* @Injectable()
* class UsefulService {}
*
* @Injectable()
* class NeedsService {
* constructor(public service:UsefulService) {}
* }
*
* var injector = Injector.resolveAndCreate([NeedsService, UsefulService]);
* expect(injector.get(NeedsService).service instanceof UsefulService).toBe(true);
* ```
* {@link Injector} will throw {@link NoAnnotationError} when trying to instantiate a class that
* does not have `@Injectable` marker, as shown in the example below.
*
* ```typescript
* class UsefulService {}
*
* class NeedsService {
* constructor(public service:UsefulService) {}
* }
*
* var injector = Injector.resolveAndCreate([NeedsService, UsefulService]);
* expect(() => injector.get(NeedsService)).toThrowError();
* ```
*/
class InjectableMetadata {
constructor();
}
/**
* Specifies that an {@link Injector} should retrieve a dependency only from itself.
*
* ### Example ([live demo](http://plnkr.co/edit/NeagAg?p=preview))
*
* ```typescript
* class Dependency {
* }
*
* @Injectable()
* class NeedsDependency {
* dependency;
*
* dependency;
* constructor(@Self() dependency:Dependency) {
* this.dependency = dependency;
* }
* }
*
* var inj = Injector.resolveAndCreate([Dependency, NeedsDependency]);
* var nd = inj.get(NeedsDependency);
*
* expect(nd.dependency instanceof Dependency).toBe(true);
*
* var inj = Injector.resolveAndCreate([Dependency]);
* var child = inj.resolveAndCreateChild([NeedsDependency]);
* expect(() => child.get(NeedsDependency)).toThrowError();
* ```
*/
class SelfMetadata {
toString(): string;
}
/**
* Specifies that an injector should retrieve a dependency from any injector until reaching the
* closest host.
*
* In Angular, a component element is automatically declared as a host for all the injectors in
* its view.
*
* ### Example ([live demo](http://plnkr.co/edit/GX79pV?p=preview))
*
* In the following example `App` contains `ParentCmp`, which contains `ChildDirective`.
* So `ParentCmp` is the host of `ChildDirective`.
*
* `ChildDirective` depends on two services: `HostService` and `OtherService`.
* `HostService` is defined at `ParentCmp`, and `OtherService` is defined at `App`.
*
* ```typescript
* class OtherService {}
* class HostService {}
*
* @Directive({
* selector: 'child-directive'
* })
* class ChildDirective {
* constructor(@Optional() @Host() os:OtherService, @Optional() @Host() hs:HostService){
* console.log("os is null", os);
* console.log("hs is NOT null", hs);
* }
* }
*
* @Component({
* selector: 'parent-cmp',
* bindings: [HostService]
* })
* @View({
* template: `
* Dir: ): ResolvedBinding[];
/**
* Resolves an array of bindings and creates an injector from those bindings.
*
* The passed-in bindings can be an array of `Type`, {@link Binding},
* or a recursive array of more bindings.
*
* ### Example ([live demo](http://plnkr.co/edit/ePOccA?p=preview))
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var injector = Injector.resolveAndCreate([Car, Engine]);
* expect(injector.get(Car) instanceof Car).toBe(true);
* ```
*
* This function is slower than the corresponding `fromResolvedBindings`
* because it needs to resolve the passed-in bindings first.
* See {@link resolve} and {@link fromResolvedBindings}.
*/
static resolveAndCreate(bindings: Array): Injector;
/**
* Creates an injector from previously resolved bindings.
*
* This API is the recommended way to construct injectors in performance-sensitive parts.
*
* ### Example ([live demo](http://plnkr.co/edit/KrSMci?p=preview))
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var bindings = Injector.resolve([Car, Engine]);
* var injector = Injector.fromResolvedBindings(bindings);
* expect(injector.get(Car) instanceof Car).toBe(true);
* ```
*/
static fromResolvedBindings(bindings: ResolvedBinding[]): Injector;
/**
* Retrieves an instance from the injector based on the provided token.
* Throws {@link NoBindingError} if not found.
*
* ### Example ([live demo](http://plnkr.co/edit/HeXSHg?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind("validToken").toValue("Value")
* ]);
* expect(injector.get("validToken")).toEqual("Value");
* expect(() => injector.get("invalidToken")).toThrowError();
* ```
*
* `Injector` returns itself when given `Injector` as a token.
*
* ```typescript
* var injector = Injector.resolveAndCreate([]);
* expect(injector.get(Injector)).toBe(injector);
* ```
*/
get(token: any): any;
/**
* Retrieves an instance from the injector based on the provided token.
* Returns null if not found.
*
* ### Example ([live demo](http://plnkr.co/edit/tpEbEy?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind("validToken").toValue("Value")
* ]);
* expect(injector.getOptional("validToken")).toEqual("Value");
* expect(injector.getOptional("invalidToken")).toBe(null);
* ```
*
* `Injector` returns itself when given `Injector` as a token.
*
* ```typescript
* var injector = Injector.resolveAndCreate([]);
* expect(injector.getOptional(Injector)).toBe(injector);
* ```
*/
getOptional(token: any): any;
/**
* Parent of this injector.
*
*
*
* ### Example ([live demo](http://plnkr.co/edit/eosMGo?p=preview))
*
* ```typescript
* var parent = Injector.resolveAndCreate([]);
* var child = parent.resolveAndCreateChild([]);
* expect(child.parent).toBe(parent);
* ```
*/
parent: Injector;
/**
* Resolves an array of bindings and creates a child injector from those bindings.
*
*
*
* The passed-in bindings can be an array of `Type`, {@link Binding},
* or a recursive array of more bindings.
*
* ### Example ([live demo](http://plnkr.co/edit/opB3T4?p=preview))
*
* ```typescript
* class ParentBinding {}
* class ChildBinding {}
*
* var parent = Injector.resolveAndCreate([ParentBinding]);
* var child = parent.resolveAndCreateChild([ChildBinding]);
*
* expect(child.get(ParentBinding) instanceof ParentBinding).toBe(true);
* expect(child.get(ChildBinding) instanceof ChildBinding).toBe(true);
* expect(child.get(ParentBinding)).toBe(parent.get(ParentBinding));
* ```
*
* This function is slower than the corresponding `createChildFromResolved`
* because it needs to resolve the passed-in bindings first.
* See {@link resolve} and {@link createChildFromResolved}.
*/
resolveAndCreateChild(bindings: Array): Injector;
/**
* Creates a child injector from previously resolved bindings.
*
*
*
* This API is the recommended way to construct injectors in performance-sensitive parts.
*
* ### Example ([live demo](http://plnkr.co/edit/VhyfjN?p=preview))
*
* ```typescript
* class ParentBinding {}
* class ChildBinding {}
*
* var parentBindings = Injector.resolve([ParentBinding]);
* var childBindings = Injector.resolve([ChildBinding]);
*
* var parent = Injector.fromResolvedBindings(parentBindings);
* var child = parent.createChildFromResolved(childBindings);
*
* expect(child.get(ParentBinding) instanceof ParentBinding).toBe(true);
* expect(child.get(ChildBinding) instanceof ChildBinding).toBe(true);
* expect(child.get(ParentBinding)).toBe(parent.get(ParentBinding));
* ```
*/
createChildFromResolved(bindings: ResolvedBinding[]): Injector;
/**
* Resolves a binding and instantiates an object in the context of the injector.
*
* The created object does not get cached by the injector.
*
* ### Example ([live demo](http://plnkr.co/edit/yvVXoB?p=preview))
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var injector = Injector.resolveAndCreate([Engine]);
*
* var car = injector.resolveAndInstantiate(Car);
* expect(car.engine).toBe(injector.get(Engine));
* expect(car).not.toBe(injector.resolveAndInstantiate(Car));
* ```
*/
resolveAndInstantiate(binding: Type | Binding): any;
/**
* Instantiates an object using a resolved binding in the context of the injector.
*
* The created object does not get cached by the injector.
*
* ### Example ([live demo](http://plnkr.co/edit/ptCImQ?p=preview))
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var injector = Injector.resolveAndCreate([Engine]);
* var carBinding = Injector.resolve([Car])[0];
* var car = injector.instantiateResolved(carBinding);
* expect(car.engine).toBe(injector.get(Engine));
* expect(car).not.toBe(injector.instantiateResolved(carBinding));
* ```
*/
instantiateResolved(binding: ResolvedBinding): any;
displayName: string;
toString(): string;
}
/**
* Describes how the {@link Injector} should instantiate a given token.
*
* See {@link bind}.
*
* ### Example ([live demo](http://plnkr.co/edit/GNAyj6K6PfYg2NBzgwZ5?p%3Dpreview&p=preview))
*
* ```javascript
* var injector = Injector.resolveAndCreate([
* new Binding("message", { toValue: 'Hello' })
* ]);
*
* expect(injector.get("message")).toEqual('Hello');
* ```
*/
class Binding {
constructor(token: any, {toClass, toValue, toAlias, toFactory, deps, multi}: {
toClass?: Type,
toValue?: any,
toAlias?: any,
toFactory?: Function,
deps?: Object[],
multi?: boolean
});
/**
* Token used when retrieving this binding. Usually, it is a type {@link `Type`}.
*/
token: any;
/**
* Binds a DI token to an implementation class.
*
* ### Example ([live demo](http://plnkr.co/edit/RSTG86qgmoxCyj9SWPwY?p=preview))
*
* Because `toAlias` and `toClass` are often confused, the example contains both use cases for
* easy
* comparison.
*
* ```typescript
* class Vehicle {}
*
* class Car extends Vehicle {}
*
* var injectorClass = Injector.resolveAndCreate([
* Car,
* new Binding(Vehicle, { toClass: Car })
* ]);
* var injectorAlias = Injector.resolveAndCreate([
* Car,
* new Binding(Vehicle, { toAlias: Car })
* ]);
*
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
*
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
* ```
*/
toClass: Type;
/**
* Binds a DI token to a value.
*
* ### Example ([live demo](http://plnkr.co/edit/UFVsMVQIDe7l4waWziES?p=preview))
*
* ```javascript
* var injector = Injector.resolveAndCreate([
* new Binding("message", { toValue: 'Hello' })
* ]);
*
* expect(injector.get("message")).toEqual('Hello');
* ```
*/
toValue: any;
/**
* Binds a DI token as an alias for an existing token.
*
* An alias means that {@link Injector} returns the same instance as if the alias token was used.
* This is in contrast to `toClass` where a separate instance of `toClass` is returned.
*
* ### Example ([live demo](http://plnkr.co/edit/QsatsOJJ6P8T2fMe9gr8?p=preview))
*
* Because `toAlias` and `toClass` are often confused the example contains both use cases for easy
* comparison.
*
* ```typescript
* class Vehicle {}
*
* class Car extends Vehicle {}
*
* var injectorAlias = Injector.resolveAndCreate([
* Car,
* new Binding(Vehicle, { toAlias: Car })
* ]);
* var injectorClass = Injector.resolveAndCreate([
* Car,
* new Binding(Vehicle, { toClass: Car })
* ]);
*
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
*
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
* ```
*/
toAlias: any;
/**
* Binds a DI token to a function which computes the value.
*
* ### Example ([live demo](http://plnkr.co/edit/Scoxy0pJNqKGAPZY1VVC?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* new Binding(Number, { toFactory: () => { return 1+2; }}),
* new Binding(String, { toFactory: (value) => { return "Value: " + value; },
* deps: [Number] })
* ]);
*
* expect(injector.get(Number)).toEqual(3);
* expect(injector.get(String)).toEqual('Value: 3');
* ```
*
* Used in conjuction with dependencies.
*/
toFactory: Function;
/**
* Specifies a set of dependencies
* (as `token`s) which should be injected into the factory function.
*
* ### Example ([live demo](http://plnkr.co/edit/Scoxy0pJNqKGAPZY1VVC?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* new Binding(Number, { toFactory: () => { return 1+2; }}),
* new Binding(String, { toFactory: (value) => { return "Value: " + value; },
* deps: [Number] })
* ]);
*
* expect(injector.get(Number)).toEqual(3);
* expect(injector.get(String)).toEqual('Value: 3');
* ```
*
* Used in conjunction with `toFactory`.
*/
dependencies: Object[];
/**
* Creates multiple bindings matching the same token (a multi-binding).
*
* Multi-bindings are used for creating pluggable service, where the system comes
* with some default bindings, and the user can register additonal bindings.
* The combination of the default bindings and the additional bindings will be
* used to drive the behavior of the system.
*
* ### Example
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* new Binding("Strings", { toValue: "String1", multi: true}),
* new Binding("Strings", { toValue: "String2", multi: true})
* ]);
*
* expect(injector.get("Strings")).toEqual(["String1", "String2"]);
* ```
*
* Multi-bindings and regular bindings cannot be mixed. The following
* will throw an exception:
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* new Binding("Strings", { toValue: "String1", multi: true }),
* new Binding("Strings", { toValue: "String2"})
* ]);
* ```
*/
multi: boolean;
}
/**
* Helper class for the {@link bind} function.
*/
class BindingBuilder {
constructor(token: any);
token: any;
/**
* Binds a DI token to a class.
*
* ### Example ([live demo](http://plnkr.co/edit/ZpBCSYqv6e2ud5KXLdxQ?p=preview))
*
* Because `toAlias` and `toClass` are often confused, the example contains both use cases for
* easy comparison.
*
* ```typescript
* class Vehicle {}
*
* class Car extends Vehicle {}
*
* var injectorClass = Injector.resolveAndCreate([
* Car,
* bind(Vehicle).toClass(Car)
* ]);
* var injectorAlias = Injector.resolveAndCreate([
* Car,
* bind(Vehicle).toAlias(Car)
* ]);
*
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
*
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
* ```
*/
toClass(type: Type): Binding;
/**
* Binds a DI token to a value.
*
* ### Example ([live demo](http://plnkr.co/edit/G024PFHmDL0cJFgfZK8O?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind('message').toValue('Hello')
* ]);
*
* expect(injector.get('message')).toEqual('Hello');
* ```
*/
toValue(value: any): Binding;
/**
* Binds a DI token as an alias for an existing token.
*
* An alias means that we will return the same instance as if the alias token was used. (This is
* in contrast to `toClass` where a separate instance of `toClass` will be returned.)
*
* ### Example ([live demo](http://plnkr.co/edit/uBaoF2pN5cfc5AfZapNw?p=preview))
*
* Because `toAlias` and `toClass` are often confused, the example contains both use cases for
* easy
* comparison.
*
* ```typescript
* class Vehicle {}
*
* class Car extends Vehicle {}
*
* var injectorAlias = Injector.resolveAndCreate([
* Car,
* bind(Vehicle).toAlias(Car)
* ]);
* var injectorClass = Injector.resolveAndCreate([
* Car,
* bind(Vehicle).toClass(Car)
* ]);
*
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
*
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
* ```
*/
toAlias(aliasToken: /*Type*/ any): Binding;
/**
* Binds a DI token to a function which computes the value.
*
* ### Example ([live demo](http://plnkr.co/edit/OejNIfTT3zb1iBxaIYOb?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind(Number).toFactory(() => { return 1+2; }),
* bind(String).toFactory((v) => { return "Value: " + v; }, [Number])
* ]);
*
* expect(injector.get(Number)).toEqual(3);
* expect(injector.get(String)).toEqual('Value: 3');
* ```
*/
toFactory(factory: Function, dependencies?: any[]): Binding;
}
/**
* An internal resolved representation of a {@link Binding} used by the {@link Injector}.
*
* It is usually created automatically by `Injector.resolveAndCreate`.
*
* It can be created manually, as follows:
*
* ### Example ([live demo](http://plnkr.co/edit/RfEnhh8kUEI0G3qsnIeT?p%3Dpreview&p=preview))
*
* ```typescript
* var resolvedBindings = Injector.resolve([new Binding('message', {toValue: 'Hello'})]);
* var injector = Injector.fromResolvedBindings(resolvedBindings);
*
* expect(injector.get('message')).toEqual('Hello');
* ```
*/
interface ResolvedBinding {
/**
* A key, usually a `Type`.
*/
key: Key;
}
/**
* @private
* An internal resolved representation of a factory function created by resolving {@link Binding}.
*/
class ResolvedFactory {
constructor(factory: Function, dependencies: Dependency[]);
/**
* Factory function which can return an instance of an object represented by a key.
*/
factory: Function;
/**
* Arguments (dependencies) to the `factory` function.
*/
dependencies: Dependency[];
}
/**
* @private
*/
class Dependency {
constructor(key: Key, optional: boolean, lowerBoundVisibility: any, upperBoundVisibility: any, properties: any[]);
static fromKey(key: Key): Dependency;
key: Key;
optional: boolean;
lowerBoundVisibility: any;
upperBoundVisibility: any;
properties: any[];
}
/**
* Creates a {@link Binding}.
*
* To construct a {@link Binding}, bind a `token` to either a class, a value, a factory function, or
* to an alias to another `token`.
* See {@link BindingBuilder} for more details.
*
* The `token` is most commonly a class or {@link angular2/di/OpaqueToken}.
*/
function bind(token: any): BindingBuilder;
/**
* A unique object used for retrieving items from the {@link Injector}.
*
* Keys have:
* - a system-wide unique `id`.
* - a `token`.
*
* `Key` is used internally by {@link Injector} because its system-wide unique `id` allows the
* injector to store created objects in a more efficient way.
*
* `Key` should not be created directly. {@link Injector} creates keys automatically when resolving
* bindings.
*/
class Key {
/**
* Private
*/
constructor(token: Object, id: number);
/**
* Retrieves a `Key` for a token.
*/
static get(token: Object): Key;
/**
* @returns the number of keys registered in the system.
*/
static numberOfKeys: number;
token: Object;
id: number;
/**
* Returns a stringified token.
*/
displayName: string;
}
/**
* @private
* Type literals is a Dart-only feature. This is here only so we can x-compile
* to multiple languages.
*/
class TypeLiteral {
type: any;
}
/**
* Thrown when trying to retrieve a dependency by `Key` from {@link Injector}, but the
* {@link Injector} does not have a {@link Binding} for {@link Key}.
*
* ### Example ([live demo](http://plnkr.co/edit/vq8D3FRB9aGbnWJqtEPE?p=preview))
*
* ```typescript
* class A {
* constructor(b:B) {}
* }
*
* expect(() => Injector.resolveAndCreate([A])).toThrowError();
* ```
*/
class NoBindingError extends AbstractBindingError {
constructor(injector: Injector, key: Key);
}
/**
* Base class for all errors arising from misconfigured bindings.
*/
class AbstractBindingError extends BaseException {
constructor(injector: Injector, key: Key, constructResolvingMessage: Function);
addKey(injector: Injector, key: Key): void;
context: any;
}
/**
* Thrown when dependencies form a cycle.
*
* ### Example ([live demo](http://plnkr.co/edit/wYQdNos0Tzql3ei1EV9j?p=info))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind("one").toFactory((two) => "two", [[new Inject("two")]]),
* bind("two").toFactory((one) => "one", [[new Inject("one")]])
* ]);
*
* expect(() => injector.get("one")).toThrowError();
* ```
*
* Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed.
*/
class CyclicDependencyError extends AbstractBindingError {
constructor(injector: Injector, key: Key);
}
/**
* Thrown when a constructing type returns with an Error.
*
* The `InstantiationError` class contains the original error plus the dependency graph which caused
* this object to be instantiated.
*
* ### Example ([live demo](http://plnkr.co/edit/7aWYdcqTQsP0eNqEdUAf?p=preview))
*
* ```typescript
* class A {
* constructor() {
* throw new Error('message');
* }
* }
*
* var injector = Injector.resolveAndCreate([A]);
*
* try {
* injector.get(A);
* } catch (e) {
* expect(e instanceof InstantiationError).toBe(true);
* expect(e.originalException.message).toEqual("message");
* expect(e.originalStack).toBeDefined();
* }
* ```
*/
interface InstantiationError extends WrappedException {
addKey(injector: Injector, key: Key): void;
wrapperMessage: string;
causeKey: Key;
context: any;
}
/**
* Thrown when an object other then {@link Binding} (or `Type`) is passed to {@link Injector}
* creation.
*
* ### Example ([live demo](http://plnkr.co/edit/YatCFbPAMCL0JSSQ4mvH?p=preview))
*
* ```typescript
* expect(() => Injector.resolveAndCreate(["not a type"])).toThrowError();
* ```
*/
class InvalidBindingError extends BaseException {
constructor(binding: any);
}
/**
* Thrown when the class has no annotation information.
*
* Lack of annotation information prevents the {@link Injector} from determining which dependencies
* need to be injected into the constructor.
*
* ### Example ([live demo](http://plnkr.co/edit/rHnZtlNS7vJOPQ6pcVkm?p=preview))
*
* ```typescript
* class A {
* constructor(b) {}
* }
*
* expect(() => Injector.resolveAndCreate([A])).toThrowError();
* ```
*
* This error is also thrown when the class not marked with {@link @Injectable} has parameter types.
*
* ```typescript
* class B {}
*
* class A {
* constructor(b:B) {} // no information about the parameter types of A is available at runtime.
* }
*
* expect(() => Injector.resolveAndCreate([A,B])).toThrowError();
* ```
*/
class NoAnnotationError extends BaseException {
constructor(typeOrFunc: any, params: any[][]);
}
/**
* Thrown when getting an object by index.
*
* ### Example ([live demo](http://plnkr.co/edit/bRs0SX2OTQiJzqvjgl8P?p=preview))
*
* ```typescript
* class A {}
*
* var injector = Injector.resolveAndCreate([A]);
*
* expect(() => injector.getAt(100)).toThrowError();
* ```
*/
class OutOfBoundsError extends BaseException {
constructor(index: any);
}
/**
* Creates a token that can be used in a DI Binding.
*
* ### Example ([live demo](http://plnkr.co/edit/Ys9ezXpj2Mnoy3Uc8KBp?p=preview))
*
* ```typescript
* var t = new OpaqueToken("binding");
*
* var injector = Injector.resolveAndCreate([
* bind(t).toValue("bindingValue")
* ]);
*
* expect(injector.get(t)).toEqual("bindingValue");
* ```
*
* Using an `OpaqueToken` is preferable to using strings as tokens because of possible collisions
* caused by multiple bindings using the same string as two different tokens.
*
* Using an `OpaqueToken` is preferable to using an `Object` as tokens because it provides better
* error messages.
*/
class OpaqueToken {
constructor(_desc: string);
toString(): string;
}
/**
* Factory for creating {@link InjectMetadata}.
*/
interface InjectFactory {
new(token: any): InjectMetadata;
(token: any): any;
}
/**
* Factory for creating {@link OptionalMetadata}.
*/
interface OptionalFactory {
new(): OptionalMetadata;
(): any;
}
/**
* Factory for creating {@link InjectableMetadata}.
*/
interface InjectableFactory {
new(): InjectableMetadata;
(): any;
}
/**
* Factory for creating {@link SelfMetadata}.
*/
interface SelfFactory {
new(): SelfMetadata;
(): any;
}
/**
* Factory for creating {@link HostMetadata}.
*/
interface HostFactory {
new(): HostMetadata;
(): any;
}
/**
* Factory for creating {@link SkipSelfMetadata}.
*/
interface SkipSelfFactory {
new(): SkipSelfMetadata;
(): any;
}
/**
* Factory for creating {@link InjectMetadata}.
*/
var Inject: InjectFactory;
/**
* Factory for creating {@link OptionalMetadata}.
*/
var Optional: OptionalFactory;
/**
* Factory for creating {@link InjectableMetadata}.
*/
var Injectable: InjectableFactory;
/**
* Factory for creating {@link SelfMetadata}.
*/
var Self: SelfFactory;
/**
* Factory for creating {@link HostMetadata}.
*/
var Host: HostFactory;
/**
* Factory for creating {@link SkipSelfMetadata}.
*/
var SkipSelf: SkipSelfFactory;
/**
* The `async` pipe subscribes to an Observable or Promise and returns the latest value it has
* emitted.
* When a new value is emitted, the `async` pipe marks the component to be checked for changes.
*
* # Example
* The example below binds the `time` Observable to the view. Every 500ms, the `time` Observable
* updates the view with the current time.
*
* ```
* import {Observable} from 'angular2/core';
* @Component({
* selector: "task-cmp"
* })
* @View({
* template: "Time: {{ time | async }}"
* })
* class Task {
* time = new Observable(observer => {
* setInterval(_ =>
* observer.next(new Date().getTime()), 500);
* });
* }
* ```
*/
class AsyncPipe implements PipeTransform, PipeOnDestroy {
constructor(_ref: ChangeDetectorRef);
onDestroy(): void;
transform(obj: Observable | Promise, args?: any[]): any;
}
/**
* WARNING: this pipe uses the Internationalization API.
* Therefore it is only reliable in Chrome and Opera browsers.
*
* Formats a date value to a string based on the requested format.
*
* # Usage
*
* expression | date[:format]
*
* where `expression` is a date object or a number (milliseconds since UTC epoch) and
* `format` indicates which date/time components to include:
*
* | Component | Symbol | Short Form | Long Form | Numeric | 2-digit |
* |-----------|:------:|--------------|-------------------|-----------|-----------|
* | era | G | G (AD) | GGGG (Anno Domini)| - | - |
* | year | y | - | - | y (2015) | yy (15) |
* | month | M | MMM (Sep) | MMMM (September) | M (9) | MM (09) |
* | day | d | - | - | d (3) | dd (03) |
* | weekday | E | EEE (Sun) | EEEE (Sunday) | - | - |
* | hour | j | - | - | j (13) | jj (13) |
* | hour12 | h | - | - | h (1 PM) | hh (01 PM)|
* | hour24 | H | - | - | H (13) | HH (13) |
* | minute | m | - | - | m (5) | mm (05) |
* | second | s | - | - | s (9) | ss (09) |
* | timezone | z | - | z (Pacific Standard Time)| - | - |
* | timezone | Z | Z (GMT-8:00) | - | - | - |
*
* In javascript, only the components specified will be respected (not the ordering,
* punctuations, ...) and details of the formatting will be dependent on the locale.
* On the other hand in Dart version, you can also include quoted text as well as some extra
* date/time components such as quarter. For more information see:
* https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/intl/intl.DateFormat.
*
* `format` can also be one of the following predefined formats:
*
* - `'medium'`: equivalent to `'yMMMdjms'` (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
* - `'short'`: equivalent to `'yMdjm'` (e.g. 9/3/2010, 12:05 PM for en-US)
* - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. Friday, September 3, 2010 for en-US)
* - `'longDate'`: equivalent to `'yMMMMd'` (e.g. September 3, 2010)
* - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. Sep 3, 2010 for en-US)
* - `'shortDate'`: equivalent to `'yMd'` (e.g. 9/3/2010 for en-US)
* - `'mediumTime'`: equivalent to `'jms'` (e.g. 12:05:08 PM for en-US)
* - `'shortTime'`: equivalent to `'jm'` (e.g. 12:05 PM for en-US)
*
* Timezone of the formatted text will be the local system timezone of the end-users machine.
*
* # Examples
*
* Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11)
* in the _local_ time and locale is 'en-US':
*
* {{ dateObj | date }} // output is 'Jun 15, 2015'
* {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'
* {{ dateObj | date:'shortTime' }} // output is '9:43 PM'
* {{ dateObj | date:'mmss' }} // output is '43:11'
*/
class DatePipe implements PipeTransform {
transform(value: any, args: any[]): string;
supports(obj: any): boolean;
}
let DEFAULT_PIPES: Binding;
let DEFAULT_PIPES_TOKEN: OpaqueToken;
/**
* Implements json transforms to any object.
*
* # Example
*
* In this example we transform the user object to json.
*
* ```
* @Component({
* selector: "user-cmp"
* })
* @View({
* template: "User: {{ user | json }}"
* })
* class Username {
* user:Object
* constructor() {
* this.user = { name: "PatrickJS" };
* }
* }
*
* ```
*/
class JsonPipe implements PipeTransform {
transform(value: any, args?: any[]): string;
}
/**
* Creates a new List or String containing only a subset (slice) of the
* elements.
*
* The starting index of the subset to return is specified by the `start` parameter.
*
* The ending index of the subset to return is specified by the optional `end` parameter.
*
* # Usage
*
* expression | slice:start[:end]
*
* All behavior is based on the expected behavior of the JavaScript API
* Array.prototype.slice() and String.prototype.slice()
*
* Where the input expression is a [List] or [String], and `start` is:
*
* - **a positive integer**: return the item at _start_ index and all items after
* in the list or string expression.
* - **a negative integer**: return the item at _start_ index from the end and all items after
* in the list or string expression.
* - **`|start|` greater than the size of the expression**: return an empty list or string.
* - **`|start|` negative greater than the size of the expression**: return entire list or
* string expression.
*
* and where `end` is:
*
* - **omitted**: return all items until the end of the input
* - **a positive integer**: return all items before _end_ index of the list or string
* expression.
* - **a negative integer**: return all items before _end_ index from the end of the list
* or string expression.
*
* When operating on a [List], the returned list is always a copy even when all
* the elements are being returned.
*
* # Examples
*
* ## List Example
*
* Assuming `var collection = ['a', 'b', 'c', 'd']`, this `ng-for` directive:
*
* {{i}}
*
* produces the following:
*
* b
* c
*
* ## String Examples
*
* {{ 'abcdefghij' | slice:0:4 }} // output is 'abcd'
* {{ 'abcdefghij' | slice:4:0 }} // output is ''
* {{ 'abcdefghij' | slice:-4 }} // output is 'ghij'
* {{ 'abcdefghij' | slice:-4,-2 }} // output is 'gh'
* {{ 'abcdefghij' | slice: -100 }} // output is 'abcdefghij'
* {{ 'abcdefghij' | slice: 100 }} // output is ''
*/
class SlicePipe implements PipeTransform {
transform(value: any, args?: any[]): any;
supports(obj: any): boolean;
}
/**
* Implements lowercase transforms to text.
*
* # Example
*
* In this example we transform the user text lowercase.
*
* ```
* @Component({
* selector: "username-cmp"
* })
* @View({
* template: "Username: {{ user | lowercase }}"
* })
* class Username {
* user:string;
* }
*
* ```
*/
class LowerCasePipe implements PipeTransform {
transform(value: string, args?: any[]): string;
}
class NumberPipe {
}
/**
* WARNING: this pipe uses the Internationalization API.
* Therefore it is only reliable in Chrome and Opera browsers.
*
* Formats a number as local text. i.e. group sizing and separator and other locale-specific
* configurations are based on the active locale.
*
* # Usage
*
* expression | number[:digitInfo]
*
* where `expression` is a number and `digitInfo` has the following format:
*
* {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
*
* - minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.
* - minFractionDigits is the minimum number of digits after fraction. Defaults to 0.
* - maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.
*
* For more information on the acceptable range for each of these numbers and other
* details see your native internationalization library.
*
* # Examples
*
* {{ 123 | number }} // output is 123
* {{ 123.1 | number: '.2-3' }} // output is 123.10
* {{ 1 | number: '2.2' }} // output is 01.00
*/
class DecimalPipe extends NumberPipe implements PipeTransform {
transform(value: any, args: any[]): string;
}
/**
* WARNING: this pipe uses the Internationalization API.
* Therefore it is only reliable in Chrome and Opera browsers.
*
* Formats a number as local percent.
*
* # Usage
*
* expression | percent[:digitInfo]
*
* For more information about `digitInfo` see {@link DecimalPipe}
*/
class PercentPipe extends NumberPipe implements PipeTransform {
transform(value: any, args: any[]): string;
}
/**
* WARNING: this pipe uses the Internationalization API.
* Therefore it is only reliable in Chrome and Opera browsers.
*
* Formats a number as local currency.
*
* # Usage
*
* expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
*
* where `currencyCode` is the ISO 4217 currency code, such as "USD" for the US dollar and
* "EUR" for the euro. `symbolDisplay` is a boolean indicating whether to use the currency
* symbol (e.g. $) or the currency code (e.g. USD) in the output. The default for this value
* is `false`.
* For more information about `digitInfo` see {@link DecimalPipe}
*/
class CurrencyPipe extends NumberPipe implements PipeTransform {
transform(value: any, args: any[]): string;
}
/**
* Implements uppercase transforms to text.
*
* # Example
*
* In this example we transform the user text uppercase.
*
* ```
* @Component({
* selector: "username-cmp"
* })
* @View({
* template: "Username: {{ user | uppercase }}"
* })
* class Username {
* user:string;
* }
*
* ```
*/
class UpperCasePipe implements PipeTransform {
transform(value: string, args?: any[]): string;
}
/**
*
* Runtime representation a type that a Component or other object is instances of.
*
* An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
* the `MyCustomComponent` constructor function.
*/
interface Type extends Function {
new(...args: any[]): any;
}
class Observable {
observer(generator: any): Object;
}
/**
* Use by directives and components to emit custom Events.
*
* ## Examples
*
* In the following example, `Zippy` alternatively emits `open` and `close` events when its
* title gets clicked:
*
* ```
* @Component({selector: 'zippy'})
* @View({template: `
* `})
* export class Zippy {
* visible: boolean = true;
* @Output() open: EventEmitter = new EventEmitter();
* @Output() close: EventEmitter = new EventEmitter();
*
* toggle() {
* this.visible = !this.visible;
* if (this.visible) {
* this.open.next(null);
* } else {
* this.close.next(null);
* }
* }
* }
* ```
*
* Use Rx.Observable but provides an adapter to make it work as specified here:
* https://github.com/jhusain/observable-spec
*
* Once a reference implementation of the spec is available, switch to it.
*/
class EventEmitter extends Observable {
observer(generator: any): any;
toRx(): any;
next(value: any): void;
throw(error: any): void;
return(value?: any): void;
}
interface Predicate {
(value: T, index?: number, array?: T[]): boolean;
}
class WrappedException extends Error {
constructor(_wrapperMessage: string, _originalException: any, _originalStack?: any, _context?: any);
wrapperMessage: string;
wrapperStack: any;
originalException: any;
originalStack: any;
context: any;
message: string;
toString(): string;
}
/**
* An {@link angular2/di/OpaqueToken} 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);
* });
*
* ```
*/
let APP_COMPONENT: OpaqueToken;
/**
* A DI Token representing a unique string id assigned to the application by Angular and used
* primarily for prefixing application attributes and CSS styles when
* {@link ViewEncapsulation#Emulated} is being used.
*
* If you need to avoid randomly generated value to be used as an application id, you can provide
* a custom value via a DI binding configuring the root {@link Injector}
* using this token.
*/
let APP_ID: OpaqueToken;
/**
* Initialize the Angular 'platform' on the page.
*
* See {@link PlatformRef} for details on the Angular platform.
*
* # Without specified bindings
*
* If no bindings are specified, `platform`'s behavior depends on whether an existing
* platform exists:
*
* If no platform exists, a new one will be created with the default {@link platformBindings}.
*
* If a platform already exists, it will be returned (regardless of what bindings it
* was created with). This is a convenience feature, allowing for multiple applications
* to be loaded into the same platform without awareness of each other.
*
* # With specified bindings
*
* It is also possible to specify bindings to be made in the new platform. These bindings
* will be shared between all applications on the page. For example, an abstraction for
* the browser cookie jar should be bound at the platform level, because there is only one
* cookie jar regardless of how many applications on the age will be accessing it.
*
* If bindings are specified directly, `platform` will create the Angular platform with
* them if a platform did not exist already. If it did exist, however, an error will be
* thrown.
*
* # DOM Applications
*
* This version of `platform` initializes Angular to run in the UI thread, with direct
* DOM access. Web-worker applications should call `platform` from
* `src/web_workers/worker/application_common` instead.
*/
function platform(bindings?: Array): PlatformRef;
/**
* The Angular platform is the entry point for Angular on a web page. Each page
* has exactly one platform, and services (such as reflection) which are common
* to every Angular application running on the page are bound in its scope.
*
* A page's platform is initialized implicitly when {@link bootstrap}() is called, or
* explicitly by calling {@link platform}().
*/
interface PlatformRef {
/**
* Retrieve the platform {@link Injector}, which is the parent injector for
* every Angular application on the page and provides singleton bindings.
*/
injector: Injector;
/**
* Instantiate a new Angular application on the page.
*
* # What is an application?
*
* Each Angular application has its own zone, change detection, compiler,
* renderer, and other framework components. An application hosts one or more
* root components, which can be initialized via `ApplicationRef.bootstrap()`.
*
* # Application Bindings
*
* Angular applications require numerous bindings to be properly instantiated.
* When using `application()` to create a new app on the page, these bindings
* must be provided. Fortunately, there are helper functions to configure
* typical bindings, as shown in the example below.
*
* # Example
* ```
* var myAppBindings = [MyAppService];
*
* platform()
* .application([applicationCommonBindings(), applicationDomBindings(), myAppBindings])
* .bootstrap(MyTopLevelComponent);
* ```
* # See Also
*
* See the {@link bootstrap} documentation for more details.
*/
application(bindings: Array): ApplicationRef;
/**
* Instantiate a new Angular application on the page, using bindings which
* are only available asynchronously. One such use case is to initialize an
* application running in a web worker.
*
* # Usage
*
* `bindingFn` is a function that will be called in the new application's zone.
* It should return a {@link Promise} to a list of bindings to be used for the
* new application. Once this promise resolves, the application will be
* constructed in the same manner as a normal `application()`.
*/
asyncApplication(bindingFn: (zone: NgZone) =>
Promise>): Promise;
/**
* Destroy the Angular platform and all Angular applications on the page.
*/
dispose(): void;
}
/**
* A reference to an Angular application running on a page.
*
* For more about Angular applications, see the documentation for {@link bootstrap}.
*/
interface ApplicationRef {
/**
* Register a listener to be called each time `bootstrap()` is called to bootstrap
* a new root component.
*/
registerBootstrapListener(listener: (ref: ComponentRef) => void): void;
/**
* Bootstrap a new component at the root level of the application.
*
* # Bootstrap process
*
* When bootstrapping a new root component into an application, Angular mounts the
* specified application component onto DOM elements identified by the [componentType]'s
* selector and kicks off automatic change detection to finish initializing the component.
*
* # Optional Bindings
*
* Bindings for the given component can optionally be overridden via the `bindings`
* parameter. These bindings will only apply for the root component being added and any
* child components under it.
*
* # Example
* ```
* var app = platform.application([applicationCommonBindings(), applicationDomBindings()];
* app.bootstrap(FirstRootComponent);
* app.bootstrap(SecondRootComponent, [bind(OverrideBinding).toClass(OverriddenBinding)]);
* ```
*/
bootstrap(componentType: Type, bindings?: Array): Promise;
/**
* Retrieve the application {@link Injector}.
*/
injector: Injector;
/**
* Retrieve the application {@link NgZone}.
*/
zone: NgZone;
/**
* Dispose of this application and all of its components.
*/
dispose(): void;
}
/**
* Construct a default set of bindings which should be included in any Angular
* application, regardless of whether it runs on the UI thread or in a web worker.
*/
function applicationCommonBindings(): Array;
/**
* Create an Angular zone.
*/
function createNgZone(): NgZone;
/**
* @private
*/
function platformCommon(bindings?: Array, initializer?: () => void): PlatformRef;
/**
* Constructs the set of bindings meant for use at the platform level.
*
* These are bindings that should be singletons shared among all Angular applications
* running on the page.
*/
function platformBindings(): Array;
function bootstrap(appComponentType: /*Type*/ any, appBindings?: Array): Promise;
/**
* 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 {
constructor(value: string);
/**
* 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;
}
/**
* A service that can be used to get and set the title of a current HTML document.
*
* Since an Angular 2 application can't be bootstrapped on the entire HTML document (`` tag)
* it is not possible to bind to the `text` property of the `HTMLTitleElement` elements
* (representing the `` tag). Instead, this service can be used to set and get the current
* title value.
*/
class Title {
/**
* Get the title of the current HTML document.
* @returns {string}
*/
getTitle(): string;
/**
* Set the title of the current HTML document.
* @param newTitle
*/
setTitle(newTitle: string): void;
}
/**
* Implement this interface to get notified when your directive's content has been fully
* initialized.
*
* ### Example ([live demo](http://plnkr.co/edit/plamXUpsLQbIXpViZhUO?p=preview))
*
* ```typescript
* @Component({selector: 'child-cmp'})
* @View({template: `{{where}} child`})
* class ChildComponent {
* @Property() where: string;
* }
*
* @Component({selector: 'parent-cmp'})
* @View({template: `<ng-content></ng-content>`})
* class ParentComponent implements AfterContentInit {
* @ContentChild(ChildComponent) contentChild: ChildComponent;
*
* constructor() {
* // contentChild is not initialized yet
* console.log(this.getMessage(this.contentChild));
* }
*
* afterContentInit() {
* // contentChild is updated after the content has been checked
* console.log('AfterContentInit: ' + this.getMessage(this.contentChild));
* }
*
* private getMessage(cmp: ChildComponent): string {
* return cmp ? cmp.where + ' child' : 'no child';
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <parent-cmp>
* <child-cmp where="content"></child-cmp>
* </parent-cmp>`,
* directives: [ParentComponent, ChildComponent]
* })
* export class App {
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface AfterContentInit {
afterContentInit(): void;
}
/**
* Implement this interface to get notified after every check of your directive's content.
*
* ### Example ([live demo](http://plnkr.co/edit/tGdrytNEKQnecIPkD7NU?p=preview))
*
* ```typescript
* @Component({selector: 'child-cmp'})
* @View({template: `{{where}} child`})
* class ChildComponent {
* @Property() where: string;
* }
*
* @Component({selector: 'parent-cmp'})
* @View({template: `<ng-content></ng-content>`})
* class ParentComponent implements AfterContentChecked {
* @ContentChild(ChildComponent) contentChild: ChildComponent;
*
* constructor() {
* // contentChild is not initialized yet
* console.log(this.getMessage(this.contentChild));
* }
*
* afterContentChecked() {
* // contentChild is updated after the content has been checked
* console.log('AfterContentChecked: ' + this.getMessage(this.contentChild));
* }
*
* private getMessage(cmp: ChildComponent): string {
* return cmp ? cmp.where + ' child' : 'no child';
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <parent-cmp>
* <button (click)="hasContent = !hasContent">Toggle content child</button>
* <child-cmp *ng-if="hasContent" where="content"></child-cmp>
* </parent-cmp>`,
* directives: [NgIf, ParentComponent, ChildComponent]
* })
* export class App {
* hasContent = true;
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface AfterContentChecked {
afterContentChecked(): void;
}
/**
* Implement this interface to get notified when your component's view has been fully initialized.
*
* ### Example ([live demo](http://plnkr.co/edit/LhTKVMEM0fkJgyp4CI1W?p=preview))
*
* ```typescript
* @Component({selector: 'child-cmp'})
* @View({template: `{{where}} child`})
* class ChildComponent {
* @Property() where: string;
* }
*
* @Component({selector: 'parent-cmp'})
* @View({
* template: `<child-cmp where="view"></child-cmp>`,
* directives: [ChildComponent]
* })
* class ParentComponent implements AfterViewInit {
* @ViewChild(ChildComponent) viewChild: ChildComponent;
*
* constructor() {
* // viewChild is not initialized yet
* console.log(this.getMessage(this.viewChild));
* }
*
* afterViewInit() {
* // viewChild is updated after the view has been initialized
* console.log('afterViewInit: ' + this.getMessage(this.viewChild));
* }
*
* private getMessage(cmp: ChildComponent): string {
* return cmp ? cmp.where + ' child' : 'no child';
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `<parent-cmp></parent-cmp>`,
* directives: [ParentComponent]
* })
* export class App {
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface AfterViewInit {
afterViewInit(): void;
}
/**
* Implement this interface to get notified after every check of your component's view.
*
* ### Example ([live demo](http://plnkr.co/edit/0qDGHcPQkc25CXhTNzKU?p=preview))
*
* ```typescript
* @Component({selector: 'child-cmp'})
* @View({template: `{{where}} child`})
* class ChildComponent {
* @Property() where: string;
* }
*
* @Component({selector: 'parent-cmp'})
* @View({
* template: `
* <button (click)="showView = !showView">Toggle view child</button>
* <child-cmp *ng-if="showView" where="view"></child-cmp>`,
* directives: [NgIf, ChildComponent]
* })
* class ParentComponent implements AfterViewChecked {
* @ViewChild(ChildComponent) viewChild: ChildComponent;
* showView = true;
*
* constructor() {
* // viewChild is not initialized yet
* console.log(this.getMessage(this.viewChild));
* }
*
* afterViewChecked() {
* // viewChild is updated after the view has been checked
* console.log('AfterViewChecked: ' + this.getMessage(this.viewChild));
* }
*
* private getMessage(cmp: ChildComponent): string {
* return cmp ? cmp.where + ' child' : 'no child';
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `<parent-cmp></parent-cmp>`,
* directives: [ParentComponent]
* })
* export class App {
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface AfterViewChecked {
afterViewChecked(): void;
}
/**
* Lifecycle hooks are guaranteed to be called in the following order:
* - `OnChanges` (if any bindings have changed),
* - `OnInit` (after the first check only),
* - `DoCheck`,
* - `AfterContentInit`,
* - `AfterContentChecked`,
* - `AfterViewInit`,
* - `AfterViewChecked`,
* - `OnDestroy` (at the very end before destruction)
* Implement this interface to get notified when any data-bound property of your directive changes.
*
* `onChanges` is called right after the data-bound properties have been checked and before view
* and content children are checked if at least one of them has changed.
*
* The `changes` parameter contains an entry for each of the changed data-bound property. The key is
* the property name and the value is an instance of {@link SimpleChange}.
*
* ### Example ([live example](http://plnkr.co/edit/AHrB6opLqHDBPkt4KpdT?p=preview)):
*
* ```typescript
* @Component({selector: 'my-cmp'})
* @View({template: `<p>myProp = {{myProp}}</p>`})
* class MyComponent implements OnChanges {
* @Property() myProp: any;
*
* onChanges(changes: {[propName: string]: SimpleChange}) {
* console.log('onChanges - myProp = ' + changes['myProp'].currentValue);
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <button (click)="value = value + 1">Change MyComponent</button>
* <my-cmp [my-prop]="value"></my-cmp>`,
* directives: [MyComponent]
* })
* export class App {
* value = 0;
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface OnChanges {
onChanges(changes: {[key: string]: SimpleChange}): void;
}
/**
* Implement this interface to get notified when your directive is destroyed.
*
* `onDestroy` callback is typically used for any custom cleanup that needs to occur when the
* instance is destroyed
*
* ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
*
* ```typesript
* @Component({selector: 'my-cmp'})
* @View({template: `<p>my-component</p>`})
* class MyComponent implements OnInit, OnDestroy {
* onInit() {
* console.log('onInit');
* }
*
* onDestroy() {
* console.log('onDestroy');
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <button (click)="hasChild = !hasChild">
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent
* </button>
* <my-cmp *ng-if="hasChild"></my-cmp>`,
* directives: [MyComponent, NgIf]
* })
* export class App {
* hasChild = true;
* }
*
* bootstrap(App).catch(err => console.error(err));
* * ```
*/
interface OnDestroy {
onDestroy(): void;
}
/**
* Implement this interface to execute custom initialization logic after your directive's
* data-bound properties have been initialized.
*
* `onInit` is called right after the directive's data-bound properties have been checked for the
* first time, and before any of its children have been checked. It is invoked only once when the
* directive is instantiated.
*
* ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
*
* ```typescript
* @Component({selector: 'my-cmp'})
* @View({template: `<p>my-component</p>`})
* class MyComponent implements OnInit, OnDestroy {
* onInit() {
* console.log('onInit');
* }
*
* onDestroy() {
* console.log('onDestroy');
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <button (click)="hasChild = !hasChild">
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent
* </button>
* <my-cmp *ng-if="hasChild"></my-cmp>`,
* directives: [MyComponent, NgIf]
* })
* export class App {
* hasChild = true;
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface OnInit {
onInit(): void;
}
/**
* Implement this interface to override the default change detection algorithm for your directive.
*
* `doCheck` gets called to check the changes in the directives instead of the default algorithm.
*
* The default change detection algorithm looks for differences by comparing bound-property values
* by reference across change detection runs. When `DoCheck` is implemented, the default algorithm
* is disabled and `doCheck` is responsible for checking for changes.
*
* Implementing this interface allows improving performance by using insights about the component,
* its implementation and data types of its properties.
*
* Note that a directive should not implement both `DoCheck` and {@link OnChanges} at the same time.
* `onChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes
* have to be handled from within the `doCheck` callback.
*
* Use {@link KeyValueDiffers} and {@link IterableDiffers} to add your custom check mechanisms.
*
* ### Example ([live demo](http://plnkr.co/edit/QpnIlF0CR2i5bcYbHEUJ?p=preview))
*
* In the following example `doCheck` uses an {@link IterableDiffers} to detect the updates to the
* array `list`:
*
* ```typescript
* @Component({selector: 'custom-check'})
* @View({
* template: `
* <p>Changes:</p>
* <ul>
* <li *ng-for="#line of logs">{{line}}</li>
* </ul>`,
* directives: [NgFor]
* })
* class CustomCheckComponent implements DoCheck {
* @Property() list: any[];
* differ: any;
* logs = [];
*
* constructor(differs: IterableDiffers) {
* this.differ = differs.find([]).create(null);
* }
*
* doCheck() {
* var changes = this.differ.diff(this.list);
*
* if (changes) {
* changes.forEachAddedItem(r => this.logs.push('added ' + r.item));
* changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item))
* }
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <button (click)="list.push(list.length)">Push</button>
* <button (click)="list.pop()">Pop</button>
* <custom-check [list]="list"></custom-check>`,
* directives: [CustomCheckComponent]
* })
* export class App {
* list = [];
* }
* ```
*/
interface DoCheck {
doCheck(): void;
}
class DirectiveResolver {
/**
* Return {@link DirectiveMetadata} for a given `Type`.
*/
resolve(type: Type): DirectiveMetadata;
}
/**
* Low-level service for compiling {@link Component}s into {@link ProtoViewRef ProtoViews}s, which
* can later be used to create and render a Component instance.
*
* Most applications should instead use higher-level {@link DynamicComponentLoader} service, which
* both compiles and instantiates a Component.
*/
interface Compiler {
compileInHost(componentType: Type): Promise<ProtoViewRef>;
clearCache(): void;
}
/**
* Service exposing low level API for creating, moving and destroying Views.
*
* Most applications should use higher-level abstractions like {@link DynamicComponentLoader} and
* {@link ViewContainerRef} instead.
*/
interface AppViewManager {
/**
* Returns a {@link ViewContainerRef} of the View Container at the specified location.
*/
getViewContainer(location: ElementRef): ViewContainerRef;
/**
* Returns the {@link ElementRef} that makes up the specified Host View.
*/
getHostElement(hostViewRef: HostViewRef): ElementRef;
/**
* Searches the Component View of the Component specified via `hostLocation` and returns the
* {@link ElementRef} for the Element identified via a Variable Name `variableName`.
*
* Throws an exception if the specified `hostLocation` is not a Host Element of a Component, or if
* variable `variableName` couldn't be found in the Component View of this Component.
*/
getNamedElementInComponentView(hostLocation: ElementRef, variableName: string): ElementRef;
/**
* Returns the component instance for the provided Host Element.
*/
getComponent(hostLocation: ElementRef): any;
/**
* Creates an instance of a Component and attaches it to the first element in the global View
* (usually DOM Document) that matches the component's selector or `overrideSelector`.
*
* This as a low-level way to bootstrap an application and upgrade an existing Element to a
* Host Element. Most applications should use {@link DynamicComponentLoader#loadAsRoot} instead.
*
* The Component and its View are created based on the `hostProtoViewRef` which can be obtained
* by compiling the component with {@link Compiler#compileInHost}.
*
* Use {@link AppViewManager#destroyRootHostView} to destroy the created Component and it's Host
* View.
*
* ## Example
*
* ```
* @ng.Component({
* selector: 'child-component'
* })
* @ng.View({
* template: 'Child'
* })
* class ChildComponent {
*
* }
*
* @ng.Component({
* selector: 'my-app'
* })
* @ng.View({
* template: `
* Parent (<some-component></some-component>)
* `
* })
* 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;
/**
* Destroys the Host View created via {@link AppViewManager#createRootHostView}.
*
* Along with the Host View, the Component Instance as well as all nested View and Components are
* destroyed as well.
*/
destroyRootHostView(hostViewRef: HostViewRef): void;
/**
* Instantiates an Embedded View based on the {@link TemplateRef `templateRef`} and inserts it
* into the View Container specified via `viewContainerLocation` at the specified `index`.
*
* Returns the {@link ViewRef} for the newly created View.
*
* This as a low-level way to create and attach an Embedded via to a View Container. Most
* applications should used {@link ViewContainerRef#createEmbeddedView} instead.
*
* Use {@link AppViewManager#destroyViewInContainer} to destroy the created Embedded View.
*/
createEmbeddedViewInContainer(viewContainerLocation: ElementRef, index: number, templateRef: TemplateRef): ViewRef;
/**
* Instantiates a single {@link Component} and inserts its Host View into the View Container
* found at `viewContainerLocation`. Within the container, the view will be inserted at position
* specified via `index`.
*
* The component is instantiated using its {@link ProtoViewRef `protoViewRef`} which can be
* obtained via {@link Compiler#compileInHost}.
*
* You can optionally specify `imperativelyCreatedInjector`, which configure the {@link Injector}
* that will be created for the Host View.
*
* Returns the {@link HostViewRef} of the Host View created for the newly instantiated Component.
*
* Use {@link AppViewManager#destroyViewInContainer} to destroy the created Host View.
*/
createHostViewInContainer(viewContainerLocation: ElementRef, index: number, protoViewRef: ProtoViewRef, imperativelyCreatedInjector: ResolvedBinding[]): HostViewRef;
/**
* Destroys an Embedded or Host View attached to a View Container at the specified `index`.
*
* The View Container is located via `viewContainerLocation`.
*/
destroyViewInContainer(viewContainerLocation: ElementRef, index: number): void;
/**
* See {@link AppViewManager#detachViewInContainer}.
*/
attachViewInContainer(viewContainerLocation: ElementRef, index: number, viewRef: ViewRef): ViewRef;
/**
* See {@link AppViewManager#attachViewInContainer}.
*/
detachViewInContainer(viewContainerLocation: ElementRef, index: number): ViewRef;
}
/**
* An unmodifiable list of items that Angular keeps up to date when the state
* of the application changes.
*
* The type of object that {@link QueryMetadata} and {@link ViewQueryMetadata} provide.
*
* Implements an iterable interface, therefore it can be used in both ES6
* javascript `for (var i of items)` loops as well as in Angular templates with
* `*ng-for="#i of myList"`.
*
* Changes can be observed by subscribing to the changes `Observable`.
*
* NOTE: In the future this class will implement an `Observable` interface.
*
* ### Example ([live demo](http://plnkr.co/edit/RX8sJnQYl9FWuSCWme5z?p=preview))
* ```javascript
* @Component({...})
* class Container {
* constructor(@Query(Item) items: QueryList<Item>) {
* items.changes.subscribe(_ => console.log(items.length));
* }
* }
* ```
*/
class QueryList<T> {
changes: Observable;
length: number;
first: T;
last: T;
/**
* returns a new list with the passsed in function applied to each element.
*/
map<U>(fn: (item: T) => U): U[];
toString(): string;
}
/**
* Service for instantiating a Component and attaching it to a View at a specified location.
*/
interface DynamicComponentLoader {
/**
* Creates an instance of a Component `type` and attaches it to the first element in the
* platform-specific global view that matches the component's selector.
*
* In a browser the platform-specific global view is the main DOM Document.
*
* If needed, the component's selector can be overridden via `overrideSelector`.
*
* You can optionally provide `injector` and this {@link Injector} will be used to instantiate the
* Component.
*
* To be notified when this Component instance is destroyed, you can also optionally provide
* `onDispose` callback.
*
* Returns a promise for the {@link ComponentRef} representing the newly created Component.
*
*
* ## Example
*
* ```
* @ng.Component({
* selector: 'child-component'
* })
* @ng.View({
* template: 'Child'
* })
* class ChildComponent {
* }
*
*
*
* @ng.Component({
* selector: 'my-app'
* })
* @ng.View({
* template: `
* Parent (<child id="child"></child>)
* `
* })
* class MyApp {
* constructor(dynamicComponentLoader: ng.DynamicComponentLoader, injector: ng.Injector) {
* dynamicComponentLoader.loadAsRoot(ChildComponent, '#child', injector);
* }
* }
*
* ng.bootstrap(MyApp);
* ```
*
* Resulting DOM:
*
* ```
* <my-app>
* Parent (
* <child id="child">
* Child
* </child>
* )
* </my-app>
* ```
*/
loadAsRoot(type: Type, overrideSelector: string, injector: Injector, onDispose?: () => void): Promise<ComponentRef>;
/**
* Creates an instance of a Component and attaches it to a View Container located inside of the
* Component View of another Component instance.
*
* The targeted Component Instance is specified via its `hostLocation` {@link ElementRef}. The
* location within the Component View of this Component Instance is specified via `anchorName`
* Template Variable Name.
*
* You can optionally provide `bindings` to configure the {@link Injector} provisioned for this
* Component Instance.
*
* Returns a promise for the {@link ComponentRef} representing the newly created Component.
*
*
* ## Example
*
* ```
* @ng.Component({
* selector: 'child-component'
* })
* @ng.View({
* template: 'Child'
* })
* class ChildComponent {
* }
*
*
* @ng.Component({
* selector: 'my-app'
* })
* @ng.View({
* template: `
* Parent (<div #child></div>)
* `
* })
* class MyApp {
* constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
* dynamicComponentLoader.loadIntoLocation(ChildComponent, elementRef, 'child');
* }
* }
*
* ng.bootstrap(MyApp);
* ```
*
* Resulting DOM:
*
* ```
* <my-app>
* Parent (
* <div #child="" class="ng-binding"></div>
* <child-component class="ng-binding">Child</child-component>
* )
* </my-app>
* ```
*/
loadIntoLocation(type: Type, hostLocation: ElementRef, anchorName: string, bindings?: ResolvedBinding[]): Promise<ComponentRef>;
/**
* Creates an instance of a Component and attaches it to the View Container found at the
* `location` specified as {@link ElementRef}.
*
* You can optionally provide `bindings` to configure the {@link Injector} provisioned for this
* Component Instance.
*
* Returns a promise for the {@link ComponentRef} representing the newly created Component.
*
*
* ## Example
*
* ```
* @ng.Component({
* selector: 'child-component'
* })
* @ng.View({
* template: 'Child'
* })
* class ChildComponent {
* }
*
*
* @ng.Component({
* selector: 'my-app'
* })
* @ng.View({
* template: `Parent`
* })
* class MyApp {
* constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
* dynamicComponentLoader.loadNextToLocation(ChildComponent, elementRef);
* }
* }
*
* ng.bootstrap(MyApp);
* ```
*
* Resulting DOM:
*
* ```
* <my-app>Parent</my-app>
* <child-component>Child</child-component>
* ```
*/
loadNextToLocation(type: Type, location: ElementRef, bindings?: ResolvedBinding[]): Promise<ComponentRef>;
}
/**
* Represents a location in a View that has an injection, change-detection and render context
* associated with it.
*
* An `ElementRef` is created for each element in the Template that contains a Directive, Component
* or data-binding.
*
* An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM
* element.
*/
interface ElementRef extends RenderElementRef {
/**
* The underlying native element or `null` if direct access to native elements is not supported
* (e.g. when the application runs in a web worker).
*
* <div class="callout is-critical">
* <header>Use with caution</header>
* <p>
* Use this API as the last resort when direct access to DOM is needed. Use templating and
* data-binding provided by Angular instead. Alternatively you take a look at {@link Renderer}
* which provides API that can safely be used even when direct access to native elements is not
* supported.
* </p>
* <p>
* Relying on direct DOM access creates tight coupling between your application and rendering
* layers which will make it impossible to separate the two and deploy your application into a
* web worker.
* </p>
* </div>
*/
nativeElement: any;
}
/**
* Represents an Embedded Template that can be used to instantiate Embedded Views.
*
* You can access a `TemplateRef`, in two ways. Via a directive placed on a `<template>` element (or
* directive prefixed with `*`) and have the `TemplateRef` for this Embedded View injected into the
* constructor of the directive using the `TemplateRef` Token. Alternatively you can query for the
* `TemplateRef` from a Component or a Directive via {@link Query}.
*
* To instantiate Embedded Views based on a Template, use
* {@link ViewContainerRef#createEmbeddedView}, which will create the View and attach it to the
* View Container.
*/
interface TemplateRef {
/**
* The location in the View where the Embedded View logically belongs to.
*
* The data-binding and injection contexts of Embedded Views created from this `TemplateRef`
* inherit from the contexts of this location.
*
* Typically new Embedded Views are attached to the View Container of this location, but in
* advanced use-cases, the View can be attached to a different container while keeping the
* data-binding and injection context from the original location.
*/
elementRef: ElementRef;
/**
* Allows you to check if this Embedded Template defines Local Variable with name matching `name`.
*/
hasLocal(name: string): boolean;
}
/**
* Represents an Angular View.
*
* <!-- TODO: move the next two paragraphs to the dev guide -->
* A View is a fundamental building block of the application UI. It is the smallest grouping of
* Elements which are created and destroyed together.
*
* Properties of elements in a View can change, but the structure (number and order) of elements in
* a View cannot. Changing the structure of Elements can only be done by inserting, moving or
* removing nested Views via a {@link ViewContainer}. Each View can contain many View Containers.
* <!-- /TODO -->
*
* ## Example
*
* Given this template...
*
* ```
* Count: {{items.length}}
* <ul>
* <li *ng-for="var item of items">{{item}}</li>
* </ul>
* ```
*
* ... we have two {@link ProtoViewRef}s:
*
* Outer {@link ProtoViewRef}:
* ```
* Count: {{items.length}}
* <ul>
* <template ng-for var-item [ng-for-of]="items"></template>
* </ul>
* ```
*
* Inner {@link ProtoViewRef}:
* ```
* <li>{{item}}</li>
* ```
*
* Notice that the original template is broken down into two separate {@link ProtoViewRef}s.
*
* The outer/inner {@link ProtoViewRef}s are then assembled into views like so:
*
* ```
* <!-- ViewRef: outer-0 -->
* Count: 2
* <ul>
* <template view-container-ref></template>
* <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
* <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
* </ul>
* <!-- /ViewRef: outer-0 -->
* ```
*/
interface ViewRef extends HostViewRef {
/**
* Sets `value` of local variable called `variableName` in this View.
*/
setLocal(variableName: string, value: any): void;
}
/**
* Represents a View containing a single Element that is the Host Element of a {@link Component}
* instance.
*
* A Host View is created for every dynamically created Component that was compiled on its own (as
* opposed to as a part of another Component's Template) via {@link Compiler#compileInHost} or one
* of the higher-level APIs: {@link AppViewManager#createRootHostView},
* {@link AppViewManager#createHostViewInContainer}, {@link ViewContainerRef#createHostView}.
*/
interface HostViewRef {
}
/**
* Represents an Angular ProtoView.
*
* A ProtoView is a prototypical {@link ViewRef View} that is the result of Template compilation and
* is used by Angular to efficiently create an instance of this View based on the compiled Template.
*
* Most ProtoViews are created and used internally by Angular and you don't need to know about them,
* except in advanced use-cases where you compile components yourself via the low-level
* {@link Compiler#compileInHost} API.
*
*
* ## Example
*
* Given this template:
*
* ```
* Count: {{items.length}}
* <ul>
* <li *ng-for="var item of items">{{item}}</li>
* </ul>
* ```
*
* Angular desugars and compiles the template into two ProtoViews:
*
* Outer ProtoView:
* ```
* Count: {{items.length}}
* <ul>
* <template ng-for var-item [ng-for-of]="items"></template>
* </ul>
* ```
*
* Inner ProtoView:
* ```
* <li>{{item}}</li>
* ```
*
* Notice that the original template is broken down into two separate ProtoViews.
*/
interface ProtoViewRef {
}
/**
* Represents a container where one or more Views can be attached.
*
* The container can contain two kinds of Views. Host Views, created by instantiating a
* {@link Component} via {@link #createHostView}, and Embedded Views, created by instantiating an
* {@link TemplateRef Embedded Template} via {@link #createEmbeddedView}.
*
* The location of the View Container within the containing View is specified by the Anchor
* `element`. Each View Container can have only one Anchor Element and each Anchor Element can only
* have a single View Container.
*
* Root elements of Views attached to this container become siblings of the Anchor Element in
* the Rendered View.
*
* To access a `ViewContainerRef` of an Element, you can either place a {@link Directive} injected
* with `ViewContainerRef` on the Element, or you obtain it via
* {@link AppViewManager#getViewContainer}.
*
* <!-- TODO(i): we are also considering ElementRef#viewContainer api -->
*/
interface ViewContainerRef {
/**
* Anchor element that specifies the location of this container in the containing View.
* <!-- TODO: rename to anchorElement -->
*/
element: ElementRef;
/**
* Destroys all Views in this container.
*/
clear(): void;
/**
* Returns the {@link ViewRef} for the View located in this container at the specified index.
*/
get(index: number): ViewRef;
/**
* Returns the number of Views currently attached to this container.
*/
length: number;
/**
* Instantiates an Embedded View based on the {@link TemplateRef `templateRef`} and inserts it
* into this container at the specified `index`.
*
* If `index` is not specified, the new View will be inserted as the last View in the container.
*
* Returns the {@link ViewRef} for the newly created View.
*/
createEmbeddedView(templateRef: TemplateRef, index?: number): ViewRef;
/**
* Instantiates a single {@link Component} and inserts its Host View into this container at the
* specified `index`.
*
* The component is instantiated using its {@link ProtoViewRef `protoView`} which can be
* obtained via {@link Compiler#compileInHost}.
*
* If `index` is not specified, the new View will be inserted as the last View in the container.
*
* You can optionally specify `dynamicallyCreatedBindings`, which configure the {@link Injector}
* that will be created for the Host View.
*
* Returns the {@link HostViewRef} of the Host View created for the newly instantiated Component.
*/
createHostView(protoViewRef?: ProtoViewRef, index?: number, dynamicallyCreatedBindings?: ResolvedBinding[]): HostViewRef;
/**
* Inserts a View identified by a {@link ViewRef} into the container at the specified `index`.
*
* If `index` is not specified, the new View will be inserted as the last View in the container.
*
* Returns the inserted {@link ViewRef}.
*/
insert(viewRef: ViewRef, index?: number): ViewRef;
/**
* Returns the index of the View, specified via {@link ViewRef}, within the current container or
* `-1` if this container doesn't contain the View.
*/
indexOf(viewRef: ViewRef): number;
/**
* Destroys a View attached to this container at the specified `index`.
*
* If `index` is not specified, the last View in the container will be removed.
*/
remove(index?: number): void;
/**
* Use along with {@link #insert} to move a View within the current container.
*
* If the `index` param is omitted, the last {@link ViewRef} is detached.
*/
detach(index?: number): ViewRef;
}
/**
* Represents an instance of a Component created via {@link DynamicComponentLoader}.
*
* `ComponentRef` provides access to the Component Instance as well other objects related to this
* Component Instance and allows you to destroy the Component Instance via the {@link #dispose}
* method.
*/
interface ComponentRef {
/**
* Location of the Host Element of this Component Instance.
*/
location: ElementRef;
/**
* The instance of the Component.
*/
instance: any;
/**
* The user defined component type, represented via the constructor function.
*
* <!-- TODO: customize wording for Dart docs -->
*/
componentType: Type;
/**
* The {@link ViewRef} of the Host View of this Component instance.
*/
hostView: HostViewRef;
/**
* Destroys the component instance and all of the data structures associated with it.
*
* TODO(i): rename to destroy to be consistent with AppViewManager and ViewContainerRef
*/
dispose(): void;
}
/**
* Provides access to explicitly trigger change detection in an application.
*
* By default, `Zone` triggers change detection in Angular on each virtual machine (VM) turn. When
* testing, or in some
* limited application use cases, a developer can also trigger change detection with the
* `lifecycle.tick()` method.
*
* Each Angular application has a single `LifeCycle` instance.
*
* # Example
*
* This is a contrived example, since the bootstrap automatically runs inside of the `Zone`, which
* invokes
* `lifecycle.tick()` on your behalf.
*
* ```javascript
* bootstrap(MyApp).then((ref:ComponentRef) => {
* var lifeCycle = ref.injector.get(LifeCycle);
* var myApp = ref.instance;
*
* ref.doSomething();
* lifecycle.tick();
* });
* ```
*/
interface LifeCycle {
/**
* Invoke this method to explicitly process change detection and its side-effects.
*
* In development mode, `tick()` also performs a second change detection cycle to ensure that no
* further
* changes are detected. If additional changes are picked up during this second cycle, bindings
* in
* the app have
* side-effects that cannot be resolved in a single change detection pass. In this case, Angular
* throws an error,
* since an Angular application can only have one change detection pass during which all change
* detection must
* complete.
*/
tick(): void;
}
/**
* An injectable service for executing work inside or outside of the Angular zone.
*
* The most common use of this service is to optimize performance when starting a work consisting of
* one or more asynchronous tasks that don't require UI updates or error handling to be handled by
* Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
* can reenter the Angular zone via {@link #run}.
*
* <!-- TODO: add/fix links to:
* - docs explaining zones and the use of zones in Angular and change-detection
* - link to runOutsideAngular/run (throughout this file!)
* -->
*
* ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
* ```
* import {Component, View, NgIf, NgZone} from 'angular2/angular2';
*
* @Component({
* selector: 'ng-zone-demo'
* })
* @View({
* template: `
* <h2>Demo: NgZone</h2>
*
* <p>Progress: {{progress}}%</p>
* <p *ng-if="progress >= 100">Done processing {{label}} of Angular zone!</p>
*
* <button (click)="processWithinAngularZone()">Process within Angular zone</button>
* <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
* `,
* directives: [NgIf]
* })
* export class NgZoneDemo {
* progress: number = 0;
* label: string;
*
* constructor(private _ngZone: NgZone) {}
*
* // Loop inside the Angular zone
* // so the UI DOES refresh after each setTimeout cycle
* processWithinAngularZone() {
* this.label = 'inside';
* this.progress = 0;
* this._increaseProgress(() => console.log('Inside Done!'));
* }
*
* // Loop outside of the Angular zone
* // so the UI DOES NOT refresh after each setTimeout cycle
* processOutsideOfAngularZone() {
* this.label = 'outside';
* this.progress = 0;
* this._ngZone.runOutsideAngular(() => {
* this._increaseProgress(() => {
* // reenter the Angular zone and display done
* this._ngZone.run(() => {console.log('Outside Done!') });
* }}));
* }
*
*
* _increaseProgress(doneCallback: () => void) {
* this.progress += 1;
* console.log(`Current progress: ${this.progress}%`);
*
* if (this.progress < 100) {
* window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
* } else {
* doneCallback();
* }
* }
* }
* ```
*/
interface NgZone {
/**
* Executes the `fn` function synchronously within the Angular zone and returns value returned by
* the function.
*
* Running functions via `run` allows you to reenter Angular zone from a task that was executed
* outside of the Angular zone (typically started via {@link #runOutsideAngular}).
*
* Any future tasks or microtasks scheduled from within this function will continue executing from
* within the Angular zone.
*/
run(fn: () => any): any;
/**
* Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
* the function.
*
* Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
* doesn't trigger Angular change-detection or is subject to Angular's error handling.
*
* Any future tasks or microtasks scheduled from within this function will continue executing from
* outside of the Angular zone.
*
* Use {@link #run} to reenter the Angular zone and do work that updates the application model.
*/
runOutsideAngular(fn: () => any): any;
}
/**
* A dispatcher that relays all events that occur in a Render View.
*
* Use {@link Renderer#setEventDispatcher} to register a dispatcher for a particular Render View.
*/
interface RenderEventDispatcher {
/**
* Called when Event called `eventName` was triggered on an Element with an Event Binding for this
* Event.
*
* `elementIndex` specifies the depth-first index of the Element in the Render View.
*
* `locals` is a map for local variable to value mapping that should be used when evaluating the
* Event Binding expression.
*
* Returns `false` if `preventDefault` should be called to stop the default behavior of the Event
* in the Rendering Context.
*/
dispatchRenderEvent(elementIndex: number, eventName: string, locals: Map<string, any>): boolean;
}
/**
* Injectable service that provides a low-level interface for modifying the UI.
*
* Use this service to bypass Angular's templating and make custom UI changes that can't be
* expressed declaratively. For example if you need to set a property or an attribute whose name is
* not statically known, use {@link #setElementProperty} or {@link #setElementAttribute}
* respectively.
*
* If you are implementing a custom renderer, you must implement this interface.
*
* The default Renderer implementation is {@link DomRenderer}. Also see {@link WebWorkerRenderer}.
*/
interface Renderer {
/**
* Registers a component template represented as arrays of {@link RenderTemplateCmd}s and styles
* with the Renderer.
*
* Once a template is registered it can be referenced via {@link RenderBeginComponentCmd} when
* {@link #createProtoView creating Render ProtoView}.
*/
registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[], nativeShadow: boolean): void;
/**
* Creates a {@link RenderProtoViewRef} from an array of {@link RenderTemplateCmd}`s.
*/
createProtoView(cmds: RenderTemplateCmd[]): RenderProtoViewRef;
/**
* Creates a Root Host View based on the provided `hostProtoViewRef`.
*
* `fragmentCount` is the number of nested {@link RenderFragmentRef}s in this View. This parameter
* is non-optional so that the renderer can create a result synchronously even when application
* runs in a different context (e.g. in a Web Worker).
*
* `hostElementSelector` is a (CSS) selector for querying the main document to find the Host
* Element. The newly created Root Host View should be attached to this element.
*
* Returns an instance of {@link RenderViewWithFragments}, representing the Render View.
*/
createRootHostView(hostProtoViewRef: RenderProtoViewRef, fragmentCount: number, hostElementSelector: string): RenderViewWithFragments;
/**
* Creates a Render View based on the provided `protoViewRef`.
*
* `fragmentCount` is the number of nested {@link RenderFragmentRef}s in this View. This parameter
* is non-optional so that the renderer can create a result synchronously even when application
* runs in a different context (e.g. in a Web Worker).
*
* Returns an instance of {@link RenderViewWithFragments}, representing the Render View.
*/
createView(protoViewRef: RenderProtoViewRef, fragmentCount: number): RenderViewWithFragments;
/**
* Destroys a Render View specified via `viewRef`.
*
* This operation should be performed only on a View that has already been dehydrated and
* all of its Render Fragments have been detached.
*
* Destroying a View indicates to the Renderer that this View is not going to be referenced in any
* future operations. If the Renderer created any renderer-specific objects for this View, these
* objects should now be destroyed to prevent memory leaks.
*/
destroyView(viewRef: RenderViewRef): void;
/**
* Attaches the Nodes of a Render Fragment after the last Node of `previousFragmentRef`.
*/
attachFragmentAfterFragment(previousFragmentRef: RenderFragmentRef, fragmentRef: RenderFragmentRef): void;
/**
* Attaches the Nodes of the Render Fragment after an Element.
*/
attachFragmentAfterElement(elementRef: RenderElementRef, fragmentRef: RenderFragmentRef): void;
/**
* Detaches the Nodes of a Render Fragment from their parent.
*
* This operations should be called only on a View that has been already
* {@link #dehydrateView dehydrated}.
*/
detachFragment(fragmentRef: RenderFragmentRef): void;
/**
* Notifies a custom Renderer to initialize a Render View.
*
* This method is called by Angular after a Render View has been created, or when a previously
* dehydrated Render View is about to be reused.
*/
hydrateView(viewRef: RenderViewRef): void;
/**
* Notifies a custom Renderer that a Render View is no longer active.
*
* This method is called by Angular before a Render View will be destroyed, or when a hydrated
* Render View is about to be put into a pool for future reuse.
*/
dehydrateView(viewRef: RenderViewRef): void;
/**
* Returns the underlying native element at the specified `location`, or `null` if direct access
* to native elements is not supported (e.g. when the application runs in a web worker).
*
* <div class="callout is-critical">
* <header>Use with caution</header>
* <p>
* Use this api as the last resort when direct access to DOM is needed. Use templating and
* data-binding, or other {@link Renderer} methods instead.
* </p>
* <p>
* Relying on direct DOM access creates tight coupling between your application and rendering
* layers which will make it impossible to separate the two and deploy your application into a
* web worker.
* </p>
* </div>
*/
getNativeElementSync(location: RenderElementRef): any;
/**
* Sets a property on the Element specified via `location`.
*/
setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any): void;
/**
* Sets an attribute on the Element specified via `location`.
*
* If `attributeValue` is `null`, the attribute is removed.
*/
setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string): void;
/**
* Sets a (CSS) class on the Element specified via `location`.
*
* `isAdd` specifies if the class should be added or removed.
*/
setElementClass(location: RenderElementRef, className: string, isAdd: boolean): void;
/**
* Sets a (CSS) inline style on the Element specified via `location`.
*
* If `styleValue` is `null`, the style is removed.
*/
setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void;
/**
* Calls a method on the Element specified via `location`.
*/
invokeElementMethod(location: RenderElementRef, methodName: string, args: any[]): void;
/**
* Sets the value of an interpolated TextNode at the specified index to the `text` value.
*
* `textNodeIndex` is the depth-first index of the Node among interpolated Nodes in the Render
* View.
*/
setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void;
/**
* Sets a dispatcher to relay all events triggered in the given Render View.
*
* Each Render View can have only one Event Dispatcher, if this method is called multiple times,
* the last provided dispatcher will be used.
*/
setEventDispatcher(viewRef: RenderViewRef, dispatcher: RenderEventDispatcher): void;
}
/**
* Represents an Element that is part of a {@link RenderViewRef Render View}.
*
* `RenderElementRef` is a counterpart to {@link ElementRef} available in the Application Context.
*
* When using `Renderer` from the Application Context, `ElementRef` can be used instead of
* `RenderElementRef`.
*/
interface RenderElementRef {
/**
* Reference to the Render View that contains this Element.
*/
renderView: RenderViewRef;
/**
* Index of the Element (in the depth-first order) inside the Render View.
*
* This index is used internally by Angular to locate elements.
*/
boundElementIndex: number;
}
/**
* Represents an Angular View in the Rendering Context.
*
* `RenderViewRef` specifies to the {@link Renderer} what View to update or destroy.
*
* Unlike a {@link ViewRef} available in the Application Context, Render View contains all the
* static Component Views that have been recursively merged into a single Render View.
*
* Each `RenderViewRef` contains one or more {@link RenderFragmentRef Render Fragments}, these
* Fragments are created, hydrated, dehydrated and destroyed as a single unit together with the
* View.
*/
class RenderViewRef {
}
/**
* Represents an Angular ProtoView in the Rendering Context.
*
* When you implement a custom {@link Renderer}, `RenderProtoViewRef` specifies what Render View
* your renderer should create.
*
* `RenderProtoViewRef` is a counterpart to {@link ProtoViewRef} available in the Application
* Context. But unlike `ProtoViewRef`, `RenderProtoViewRef` contains all static nested Proto Views
* that are recursively merged into a single Render Proto View.
*
*
* <!-- TODO: this is created by Renderer#createProtoView in the new compiler -->
*/
interface RenderProtoViewRef {
}
/**
* Represents a list of sibling Nodes that can be moved by the {@link Renderer} independently of
* other Render Fragments.
*
* Any {@link RenderView} has one Render Fragment.
*
* Additionally any View with an Embedded View that contains a {@link NgContent View Projection}
* results in additional Render Fragment.
*/
class RenderFragmentRef {
}
/**
* Container class produced by a {@link Renderer} when creating a Render View.
*
* An instance of `RenderViewWithFragments` contains a {@link RenderViewRef} and an array of
* {@link RenderFragmentRef}s belonging to this Render View.
*/
class RenderViewWithFragments {
constructor(viewRef: RenderViewRef, fragmentRefs: RenderFragmentRef[]);
/**
* Reference to the {@link RenderViewRef}.
*/
viewRef: RenderViewRef;
/**
* Array of {@link RenderFragmentRef}s ordered in the depth-first order.
*/
fragmentRefs: RenderFragmentRef[];
}
/**
* A DI Token representing the main rendering context. In a browser this is the DOM Document.
*
* Note: Document might not be available in the Application Context when Application and Rendering
* Contexts are not the same (e.g. when running the application into a Web Worker).
*/
let DOCUMENT: OpaqueToken;
interface RenderTemplateCmd {
visit(visitor: RenderCommandVisitor, context: any): any;
}
interface RenderCommandVisitor {
visitText(cmd: RenderTextCmd, context: any): any;
visitNgContent(cmd: RenderNgContentCmd, context: any): any;
visitBeginElement(cmd: RenderBeginElementCmd, context: any): any;
visitEndElement(context: any): any;
visitBeginComponent(cmd: RenderBeginComponentCmd, context: any): any;
visitEndComponent(context: any): any;
visitEmbeddedTemplate(cmd: RenderEmbeddedTemplateCmd, context: any): any;
}
interface RenderTextCmd extends RenderBeginCmd {
value: string;
}
interface RenderNgContentCmd {
ngContentIndex: number;
}
interface RenderBeginElementCmd extends RenderBeginCmd {
name: string;
attrNameAndValues: string[];
eventTargetAndNames: string[];
}
interface RenderBeginComponentCmd extends RenderBeginElementCmd {
nativeShadow: boolean;
templateId: number;
}
interface RenderEmbeddedTemplateCmd extends RenderBeginElementCmd {
isMerged: boolean;
children: RenderTemplateCmd[];
}
interface RenderBeginCmd extends RenderTemplateCmd {
ngContentIndex: number;
isBound: boolean;
}
/**
* Adds and removes CSS classes based on an {expression} value.
*
* The result of expression is used to add and remove CSS classes using the following logic,
* based on expression's value type:
* - {string} - all the CSS classes (space - separated) are added
* - {Array} - all the CSS classes (Array elements) are added
* - {Object} - each key corresponds to a CSS class name while values
* are interpreted as {boolean} expression. If a given expression
* evaluates to {true} a corresponding CSS class is added - otherwise
* it is removed.
*
* # Example:
*
* ```
* <div class="message" [ng-class]="{error: errorCount > 0}">
* Please check errors.
* </div>
* ```
*/
class NgClass implements DoCheck, OnDestroy {
constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer);
initialClasses: any;
rawClass: any;
doCheck(): void;
onDestroy(): void;
}
/**
* The `NgFor` directive instantiates a template once per item from an iterable. The context for
* each instantiated template inherits from the outer context with the given loop variable set
* to the current item from the iterable.
*
* It is possible to alias the `index` to a local variable that will be set to the current loop
* iteration in the template context, and also to alias the 'last' to a local variable that will
* be set to a boolean indicating if the item is the last one in the iteration
*
* When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM:
*
* * When an item is added, a new instance of the template is added to the DOM.
* * When an item is removed, its template instance is removed from the DOM.
* * When items are reordered, their respective templates are reordered in the DOM.
*
* # Example
*
* ```
* <ul>
* <li *ng-for="#error of errors; #i = index">
* Error {{i}} of {{errors.length}}: {{error.message}}
* </li>
* </ul>
* ```
*
* # Syntax
*
* - `<li *ng-for="#item of items; #i = index">...</li>`
* - `<li template="ng-for #item of items; #i = index">...</li>`
* - `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>`
*/
class NgFor implements DoCheck {
constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef, _iterableDiffers: IterableDiffers, _cdr: ChangeDetectorRef);
ngForOf: any;
doCheck(): void;
}
/**
* Removes or recreates a portion of the DOM tree based on an {expression}.
*
* If the expression assigned to `ng-if` evaluates to a false value then the element
* is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
*
* ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
*
* ```
* <div *ng-if="errorCount > 0" class="error">
* <!-- Error message displayed when the errorCount property on the current context is greater
* than 0. -->
* {{errorCount}} errors detected
* </div>
* ```
*
* # Syntax
*
* - `<div *ng-if="condition">...</div>`
* - `<div template="ng-if condition">...</div>`
* - `<template [ng-if]="condition"><div>...</div></template>`
*/
class NgIf {
constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef);
ngIf: any;
}
/**
* Adds or removes styles based on an {expression}.
*
* When the expression assigned to `ng-style` evaluates to an object, the corresponding element
* styles are updated. Style names to update are taken from the object keys and values - from the
* corresponding object values.
*
* # Example:
*
* ```
* <div [ng-style]="{'text-align': alignExp}"></div>
* ```
*
* In the above example the `text-align` style will be updated based on the `alignExp` value
* changes.
*
* # Syntax
*
* - `<div [ng-style]="{'text-align': alignExp}"></div>`
* - `<div [ng-style]="styleExp"></div>`
*/
class NgStyle implements DoCheck {
constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer);
rawStyle: any;
doCheck(): void;
}
/**
* The `NgSwitch` directive is used to conditionally swap DOM structure on your template based on a
* scope expression.
* Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be
* preserved at the location as specified in the template.
*
* `NgSwitch` simply chooses nested elements and makes them visible based on which element matches
* the value obtained from the evaluated expression. In other words, you define a container element
* (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
* define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
* element.
* The when attribute is used to inform NgSwitch which element to display when the expression is
* evaluated. If a matching expression is not found via a when attribute then an element with the
* default attribute is displayed.
*
* # Example:
*
* ```
* <ANY [ng-switch]="expression">
* <template [ng-switch-when]="whenExpression1">...</template>
* <template [ng-switch-when]="whenExpression1">...</template>
* <template ng-switch-default>...</template>
* </ANY>
* ```
*/
class NgSwitch {
ngSwitch: any;
}
/**
* Defines a case statement as an expression.
*
* If multiple `NgSwitchWhen` match the `NgSwitch` value, all of them are displayed.
*
* Example:
*
* ```
* // match against a context variable
* <template [ng-switch-when]="contextVariable">...</template>
*
* // match against a constant string
* <template ng-switch-when="stringValue">...</template>
* ```
*/
class NgSwitchWhen {
constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, _switch: NgSwitch);
ngSwitchWhen: any;
}
/**
* Defines a default case statement.
*
* Default case statements are displayed when no `NgSwitchWhen` match the `ng-switch` value.
*
* Example:
*
* ```
* <template ng-switch-default>...</template>
* ```
*/
class NgSwitchDefault {
constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, sswitch: NgSwitch);
}
/**
* A collection of Angular core directives that are likely to be used in each and every Angular
* application.
*
* This collection can be used to quickly enumerate all the built-in directives in the `directives`
* property of the `@View` annotation.
*
* ### Example ([live demo](http://plnkr.co/edit/yakGwpCdUkg0qfzX5m8g?p=preview))
*
* Instead of writing:
*
* ```typescript
* import {NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
* import {OtherDirective} from './myDirectives';
*
* @Component({
* selector: 'my-component'
* })
* @View({
* templateUrl: 'myComponent.html',
* directives: [NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
* })
* export class MyComponent {
* ...
* }
* ```
* one could import all the core directives at once:
*
* ```typescript
* import {CORE_DIRECTIVES} from 'angular2/angular2';
* import {OtherDirective} from './myDirectives';
*
* @Component({
* selector: 'my-component'
* })
* @View({
* templateUrl: 'myComponent.html',
* directives: [CORE_DIRECTIVES, OtherDirective]
* })
* export class MyComponent {
* ...
* }
* ```
*/
let CORE_DIRECTIVES: Type[];
/**
* Omitting from external API doc as this is really an abstract internal concept.
*/
class AbstractControl {
constructor(validator: Function);
validator: Function;
value: any;
status: string;
valid: boolean;
errors: {[key: string]: any};
pristine: boolean;
dirty: boolean;
touched: boolean;
untouched: boolean;
valueChanges: Observable;
markAsTouched(): void;
markAsDirty({onlySelf}?: {onlySelf?: boolean}): void;
setParent(parent: ControlGroup | ControlArray): void;
updateValidity({onlySelf}?: {onlySelf?: boolean}): void;
updateValueAndValidity({onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}): void;
find(path: Array<string | number>| string): AbstractControl;
getError(errorCode: string, path?: string[]): any;
hasError(errorCode: string, path?: string[]): boolean;
}
/**
* Defines a part of a form that cannot be divided into other controls. `Control`s have values and
* validation state, which is determined by an optional validation function.
*
* `Control` is one of the three fundamental building blocks used to define forms in Angular, along
* with {@link ControlGroup} and {@link ControlArray}.
*
* # Usage
*
* By default, a `Control` is created for every `<input>` or other form component.
* With {@link NgFormControl} or {@link NgFormModel} an existing {@link Control} can be
* bound to a DOM element instead. This `Control` can be configured with a custom
* validation function.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*/
class Control extends AbstractControl {
constructor(value?: any, validator?: Function);
/**
* Set the value of the control to `value`.
*
* If `onlySelf` is `true`, this change will only affect the validation of this `Control`
* and not its parent component. If `emitEvent` is `true`, this change will cause a
* `valueChanges` event on the `Control` to be emitted. Both of these options default to
* `false`.
*
* If `emitModelToViewChange` is `true`, the view will be notified about the new value
* via an `onChange` event. This is the default behavior if `emitModelToViewChange` is not
* specified.
*/
updateValue(value: any, {onlySelf, emitEvent, emitModelToViewChange}?:
{onlySelf?: boolean, emitEvent?: boolean, emitModelToViewChange?: boolean}): void;
/**
* Register a listener for change events.
*/
registerOnChange(fn: Function): void;
}
/**
* Defines a part of a form, of fixed length, that can contain other controls.
*
* A `ControlGroup` aggregates the values and errors of each {@link Control} in the group. Thus, if
* one of the controls in a group is invalid, the entire group is invalid. Similarly, if a control
* changes its value, the entire group changes as well.
*
* `ControlGroup` is one of the three fundamental building blocks used to define forms in Angular,
* along with {@link Control} and {@link ControlArray}. {@link ControlArray} can also contain other
* controls, but is of variable length.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*/
class ControlGroup extends AbstractControl {
constructor(controls: {[key: string]: AbstractControl}, optionals?: {[key: string]: boolean}, validator?: Function);
controls: {[key: string]: AbstractControl};
addControl(name: string, control: AbstractControl): void;
removeControl(name: string): void;
include(controlName: string): void;
exclude(controlName: string): void;
contains(controlName: string): boolean;
}
/**
* Defines a part of a form, of variable length, that can contain other controls.
*
* A `ControlArray` aggregates the values and errors of each {@link Control} in the group. Thus, if
* one of the controls in a group is invalid, the entire group is invalid. Similarly, if a control
* changes its value, the entire group changes as well.
*
* `ControlArray` is one of the three fundamental building blocks used to define forms in Angular,
* along with {@link Control} and {@link ControlGroup}. {@link ControlGroup} can also contain
* other controls, but is of fixed length.
*
* # Adding or removing controls
*
* To change the controls in the array, use the `push`, `insert`, or `removeAt` methods
* in `ControlArray` itself. These methods ensure the controls are properly tracked in the
* form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
* the `ControlArray` directly, as that will result in strange and unexpected behavior such
* as broken change detection.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*/
class ControlArray extends AbstractControl {
constructor(controls: AbstractControl[], validator?: Function);
controls: AbstractControl[];
/**
* Get the {@link AbstractControl} at the given `index` in the array.
*/
at(index: number): AbstractControl;
/**
* Insert a new {@link AbstractControl} at the end of the array.
*/
push(control: AbstractControl): void;
/**
* Insert a new {@link AbstractControl} at the given `index` in the array.
*/
insert(index: number, control: AbstractControl): void;
/**
* Remove the control at the given `index` in the array.
*/
removeAt(index: number): void;
/**
* Get the length of the control array.
*/
length: number;
}
class AbstractControlDirective {
control: AbstractControl;
value: any;
valid: boolean;
errors: {[key: string]: any};
pristine: boolean;
dirty: boolean;
touched: boolean;
untouched: boolean;
}
/**
* An interface that {@link NgFormModel} and {@link NgForm} implement.
*
* Only used by the forms module.
*/
interface Form {
addControl(dir: NgControl): void;
removeControl(dir: NgControl): void;
getControl(dir: NgControl): Control;
addControlGroup(dir: NgControlGroup): void;
removeControlGroup(dir: NgControlGroup): void;
getControlGroup(dir: NgControlGroup): ControlGroup;
updateModel(dir: NgControl, value: any): void;
}
/**
* A directive that contains multiple {@link NgControl}.
*
* Only used by the forms module.
*/
class ControlContainer extends AbstractControlDirective {
name: string;
formDirective: Form;
path: string[];
}
/**
* Creates and binds a control with a specified name to a DOM element.
*
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
*
* # Example
*
* In this example, we create the login and password controls.
* We can work with each control separately: check its validity, get its value, listen to its
* changes.
*
* ```
* @Component({selector: "login-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `
* <form #f="form" (submit)='onLogIn(f.value)'>
* Login <input type='text' ng-control='login' #l="form">
* <div *ng-if="!l.valid">Login is invalid</div>
*
* Password <input type='password' ng-control='password'>
* <button type='submit'>Log in!</button>
* </form>
* `})
* class LoginComp {
* onLogIn(value): void {
* // value === {login: 'some login', password: 'some password'}
* }
* }
* ```
*
* We can also use ng-model to bind a domain model to the form.
*
* ```
* @Component({selector: "login-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `
* <form (submit)='onLogIn()'>
* Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
* Password <input type='password' ng-control='password'
* [(ng-model)]="credentials.password">
* <button type='submit'>Log in!</button>
* </form>
* `})
* class LoginComp {
* credentials: {login:string, password:string};
*
* onLogIn(): void {
* // this.credentials.login === "some login"
* // this.credentials.password === "some password"
* }
* }
* ```
*/
class NgControlName extends NgControl implements OnChanges,
OnDestroy {
constructor(parent: ControlContainer, validators: Function[], valueAccessors: ControlValueAccessor[]);
update: any;
model: any;
viewModel: any;
validators: Function[];
onChanges(changes: {[key: string]: SimpleChange}): void;
onDestroy(): void;
viewToModelUpdate(newValue: any): void;
path: string[];
formDirective: any;
control: Control;
validator: Function;
}
/**
* Binds an existing {@link Control} to a DOM element.
*
* ### Example ([live demo](http://plnkr.co/edit/jcQlZ2tTh22BZZ2ucNAT?p=preview))
*
* In this example, we bind the control to an input element. When the value of the input element
* changes, the value of the control will reflect that change. Likewise, if the value of the
* control changes, the input element reflects that change.
*
* ```typescript
* @Component({
* selector: 'my-app'
* })
* @View({
* template: `
* <div>
* <h2>NgFormControl Example</h2>
* <form>
* <p>Element with existing control: <input type="text"
* [ng-form-control]="loginControl"></p>
* <p>Value of existing control: {{loginControl.value}}</p>
* </form>
* </div>
* `,
* directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
* })
* export class App {
* loginControl: Control = new Control('');
* }
* ```
*
* # ng-model
*
* We can also use `ng-model` to bind a domain model to the form.
*
* ### Example ([live demo](http://plnkr.co/edit/yHMLuHO7DNgT8XvtjTDH?p=preview))
*
* ```typescript
* @Component({selector: "login-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
* })
* class LoginComp {
* loginControl: Control = new Control('');
* login:string;
* }
* ```
*/
class NgFormControl extends NgControl implements OnChanges {
constructor(validators: Function[], valueAccessors: ControlValueAccessor[]);
form: Control;
update: any;
model: any;
viewModel: any;
validators: Function[];
onChanges(changes: {[key: string]: SimpleChange}): void;
path: string[];
control: Control;
validator: Function;
viewToModelUpdate(newValue: any): void;
}
/**
* Binds a domain model to a form control.
*
* # Usage
*
* `ng-model` binds an existing domain model to a form control. For a
* two-way binding, use `[(ng-model)]` to ensure the model updates in
* both directions.
*
* ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview))
* ```typescript
* @Component({selector: "search-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `<input type='text' [(ng-model)]="searchQuery">`
* })
* class SearchComp {
* searchQuery: string;
* }
* ```
*/
class NgModel extends NgControl implements OnChanges {
constructor(validators: Function[], valueAccessors: ControlValueAccessor[]);
update: any;
model: any;
viewModel: any;
validators: Function[];
onChanges(changes: {[key: string]: SimpleChange}): void;
control: Control;
path: string[];
validator: Function;
viewToModelUpdate(newValue: any): void;
}
/**
* A base class that all control directive extend.
* It binds a {@link Control} object to a DOM element.
*/
class NgControl extends AbstractControlDirective {
name: string;
valueAccessor: ControlValueAccessor;
validator: Function;
path: string[];
viewToModelUpdate(newValue: any): void;
}
/**
* Creates and binds a control group to a DOM element.
*
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
*
* # Example
*
* In this example, we create the credentials and personal control groups.
* We can work with each group separately: check its validity, get its value, listen to its changes.
*
* ```
* @Component({selector: "signup-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `
* <form #f="form" (submit)='onSignUp(f.value)'>
* <div ng-control-group='credentials' #credentials="form">
* Login <input type='text' ng-control='login'>
* Password <input type='password' ng-control='password'>
* </div>
* <div *ng-if="!credentials.valid">Credentials are invalid</div>
*
* <div ng-control-group='personal'>
* Name <input type='text' ng-control='name'>
* </div>
* <button type='submit'>Sign Up!</button>
* </form>
* `})
* class SignupComp {
* onSignUp(value) {
* // value === {
* // personal: {name: 'some name'},
* // credentials: {login: 'some login', password: 'some password'}}
* }
* }
*
* ```
*/
class NgControlGroup extends ControlContainer implements OnInit,
OnDestroy {
constructor(_parent: ControlContainer);
onInit(): void;
onDestroy(): void;
control: ControlGroup;
path: string[];
formDirective: Form;
}
/**
* Binds an existing control group to a DOM element.
*
* ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
*
* In this example, we bind the control group to the form element, and we bind the login and
* password controls to the login and password elements.
*
* ```typescript
* @Component({
* selector: 'my-app'
* })
* @View({
* template: `
* <div>
* <h2>NgFormModel Example</h2>
* <form [ng-form-model]="loginForm">
* <p>Login: <input type="text" ng-control="login"></p>
* <p>Password: <input type="password" ng-control="password"></p>
* </form>
* <p>Value:</p>
* <pre>{{value}}</pre>
* </div>
* `,
* directives: [FORM_DIRECTIVES]
* })
* export class App {
* loginForm: ControlGroup;
*
* constructor() {
* this.loginForm = new ControlGroup({
* login: new Control(""),
* password: new Control("")
* });
* }
*
* get value(): string {
* return JSON.stringify(this.loginForm.value, null, 2);
* }
* }
* ```
*
* We can also use ng-model to bind a domain model to the form.
*
* ```typescript
* @Component({selector: "login-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `
* <form [ng-form-model]='loginForm'>
* Login <input type='text' ng-control='login' [(ng-model)]='credentials.login'>
* Password <input type='password' ng-control='password'
* [(ng-model)]='credentials.password'>
* <button (click)="onLogin()">Login</button>
* </form>`
* })
* class LoginComp {
* credentials: {login: string, password: string};
* loginForm: ControlGroup;
*
* constructor() {
* this.loginForm = new ControlGroup({
* login: new Control(""),
* password: new Control("")
* });
* }
*
* onLogin(): void {
* // this.credentials.login === 'some login'
* // this.credentials.password === 'some password'
* }
* }
* ```
*/
class NgFormModel extends ControlContainer implements Form,
OnChanges {
form: ControlGroup;
directives: NgControl[];
ngSubmit: any;
onChanges(_: any): void;
formDirective: Form;
control: ControlGroup;
path: string[];
addControl(dir: NgControl): void;
getControl(dir: NgControl): Control;
removeControl(dir: NgControl): void;
addControlGroup(dir: NgControlGroup): void;
removeControlGroup(dir: NgControlGroup): void;
getControlGroup(dir: NgControlGroup): ControlGroup;
updateModel(dir: NgControl, value: any): void;
onSubmit(): boolean;
}
/**
* If `NgForm` is bound in a component, `<form>` elements in that component will be
* upgraded to use the Angular form system.
*
* # Typical Use
*
* Include `FORM_DIRECTIVES` in the `directives` section of a {@link View} annotation
* to use `NgForm` and its associated controls.
*
* # Structure
*
* An Angular form is a collection of {@link Control}s in some hierarchy.
* `Control`s can be at the top level or can be organized in {@link ControlGroups}
* or {@link ControlArray}s. This hierarchy is reflected in the form's `value`, a
* JSON object that mirrors the form structure.
*
* # Submission
*
* The `ng-submit` event signals when the user triggers a form submission.
*
* ### Example ([live demo](http://plnkr.co/edit/ltdgYj4P0iY64AR71EpL?p=preview))
*
* ```typescript
* @Component({
* selector: 'my-app'
* })
* @View({
* template: `
* <div>
* <p>Submit the form to see the data object Angular builds</p>
* <h2>NgForm demo</h2>
* <form #f="form" (ng-submit)="onSubmit(f.value)">
* <h3>Control group: credentials</h3>
* <div ng-control-group="credentials">
* <p>Login: <input type="text" ng-control="login"></p>
* <p>Password: <input type="password" ng-control="password"></p>
* </div>
* <h3>Control group: person</h3>
* <div ng-control-group="person">
* <p>First name: <input type="text" ng-control="firstName"></p>
* <p>Last name: <input type="text" ng-control="lastName"></p>
* </div>
* <button type="submit">Submit Form</button>
* <p>Form data submitted:</p>
* </form>
* <pre>{{data}}</pre>
* </div>
* `,
* directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
* })
* export class App {
* constructor() {}
*
* data: string;
*
* onSubmit(data) {
* this.data = JSON.stringify(data, null, 2);
* }
* }
* ```
*/
class NgForm extends ControlContainer implements Form {
form: ControlGroup;
ngSubmit: any;
formDirective: Form;
control: ControlGroup;
path: string[];
controls: {[key: string]: AbstractControl};
addControl(dir: NgControl): void;
getControl(dir: NgControl): Control;
removeControl(dir: NgControl): void;
addControlGroup(dir: NgControlGroup): void;
removeControlGroup(dir: NgControlGroup): void;
getControlGroup(dir: NgControlGroup): ControlGroup;
updateModel(dir: NgControl, value: any): void;
onSubmit(): boolean;
}
/**
* A bridge between a control and a native element.
*
* Please see {@link DefaultValueAccessor} for more information.
*/
interface ControlValueAccessor {
writeValue(obj: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
}
/**
* The default accessor for writing a value and listening to changes that is used by the
* {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
*
* # Example
* ```
* <input type="text" [(ng-model)]="searchQuery">
* ```
*/
class DefaultValueAccessor implements ControlValueAccessor {
constructor(_renderer: Renderer, _elementRef: ElementRef);
onChange: any;
onTouched: any;
writeValue(value: any): void;
registerOnChange(fn: (_: any) => void): void;
registerOnTouched(fn: () => void): void;
}
class NgControlStatus {
constructor(cd: NgControl);
ngClassUntouched: boolean;
ngClassTouched: boolean;
ngClassPristine: boolean;
ngClassDirty: boolean;
ngClassValid: boolean;
ngClassInvalid: boolean;
}
/**
* The accessor for writing a value and listening to changes on a checkbox input element.
*
* # Example
* ```
* <input type="checkbox" [ng-control]="rememberLogin">
* ```
*/
class CheckboxControlValueAccessor implements ControlValueAccessor {
constructor(_renderer: Renderer, _elementRef: ElementRef);
onChange: any;
onTouched: any;
writeValue(value: any): void;
registerOnChange(fn: (_: any) => {}): void;
registerOnTouched(fn: () => {}): void;
}
/**
* Marks `<option>` as dynamic, so Angular can be notified when options change.
*
* #Example:
*
* ```
* <select ng-control="city">
* <option *ng-for="#c of cities" [value]="c"></option>
* </select>
* ```
*/
class NgSelectOption {
}
/**
* The accessor for writing a value and listening to changes on a select element.
*/
class SelectControlValueAccessor implements ControlValueAccessor {
constructor(_renderer: Renderer, _elementRef: ElementRef, query: QueryList<NgSelectOption>);
value: string;
onChange: any;
onTouched: any;
writeValue(value: any): void;
registerOnChange(fn: () => any): void;
registerOnTouched(fn: () => any): void;
}
/**
* A list of all the form directives used as part of a `@View` annotation.
*
* This is a shorthand for importing them each individually.
*
* ### Example:
*
* ```typescript
* @View({
* directives: [FORM_DIRECTIVES]
* })
* @Component({
* selector: 'my-app'
* })
* class MyApp {}
* ```
*/
let FORM_DIRECTIVES: Type[];
let NG_VALIDATORS: OpaqueToken;
/**
* Provides a set of validators used by form controls.
*
* # Example
*
* ```
* var loginControl = new Control("", Validators.required)
* ```
*/
class Validators {
static required(control:Control): {[key: string]: boolean};
static nullValidator(c: any): {[key: string]: boolean};
static compose(validators: Function[]): Function;
static group(group:ControlGroup): {[key: string]: any[]};
static array(array:ControlArray): {[key: string]: any[]};
}
class DefaultValidators {
}
/**
* Creates a form object from a user-specified configuration.
*
* # Example
*
* ```
* import {Component, View, bootstrap} from 'angular2/angular2';
* import {FormBuilder, Validators, FORM_DIRECTIVES, ControlGroup} from 'angular2/core';
*
* @Component({
* selector: 'login-comp',
* viewBindings: [FormBuilder]
* })
* @View({
* template: `
* <form [control-group]="loginForm">
* Login <input control="login">
*
* <div control-group="passwordRetry">
* Password <input type="password" control="password">
* Confirm password <input type="password" control="passwordConfirmation">
* </div>
* </form>
* `,
* directives: [FORM_DIRECTIVES]
* })
* class LoginComp {
* loginForm: ControlGroup;
*
* constructor(builder: FormBuilder) {
* this.loginForm = builder.group({
* login: ["", Validators.required],
*
* passwordRetry: builder.group({
* password: ["", Validators.required],
* passwordConfirmation: ["", Validators.required]
* })
* });
* }
* }
*
* bootstrap(LoginComp);
* ```
*
* This example creates a {@link ControlGroup} that consists of a `login` {@link Control}, and a
* nested {@link ControlGroup} that defines a `password` and a `passwordConfirmation`
* {@link Control}:
*
* ```
* var loginForm = builder.group({
* login: ["", Validators.required],
*
* passwordRetry: builder.group({
* password: ["", Validators.required],
* passwordConfirmation: ["", Validators.required]
* })
* });
*
* ```
*/
class FormBuilder {
group(controlsConfig: {[key: string]: any}, extra?: {[key: string]: any}): ControlGroup;
control(value: Object, validator?: Function): Control;
array(controlsConfig: any[], validator?: Function): ControlArray;
}
/**
* Shorthand set of bindings used for building Angular forms.
*
* ### Example:
*
* ```typescript
* bootstrap(MyApp, [FORM_BINDINGS]);
* ```
*/
let FORM_BINDINGS: Type[];
function inspectNativeElement(element: any): DebugElement;
let ELEMENT_PROBE_BINDINGS: any[];
/**
* A DebugElement contains information from the Angular compiler about an
* element and provides access to the corresponding ElementInjector and
* underlying DOM Element, as well as a way to query for children.
*/
interface DebugElement {
componentInstance: any;
nativeElement: any;
elementRef: ElementRef;
getDirectiveInstance(directiveIndex: number): any;
/**
* Get child DebugElements from within the Light DOM.
*
* @return {DebugElement[]}
*/
children: DebugElement[];
/**
* Get the root DebugElement children of a component. Returns an empty
* list if the current DebugElement is not a component root.
*
* @return {DebugElement[]}
*/
componentViewChildren: DebugElement[];
triggerEventHandler(eventName: string, eventObj: Event): void;
hasDirective(type: Type): boolean;
inject(type: Type): any;
getLocal(name: string): any;
/**
* Return the first descendant TestElement matching the given predicate
* and scope.
*
* @param {Function: boolean} predicate
* @param {Scope} scope
*
* @return {DebugElement}
*/
query(predicate: Predicate<DebugElement>, scope?: Function): DebugElement;
/**
* Return descendant TestElememts matching the given predicate
* and scope.
*
* @param {Function: boolean} predicate
* @param {Scope} scope
*
* @return {DebugElement[]}
*/
queryAll(predicate: Predicate<DebugElement>, scope?: Function): DebugElement[];
}
/**
* Returns a DebugElement for a ElementRef.
*
* @param {ElementRef}: elementRef
* @return {DebugElement}
*/
function inspectElement(elementRef: ElementRef): DebugElement;
function asNativeElements(arr: DebugElement[]): any[];
class Scope {
static all(debugElement: DebugElement): DebugElement[];
static light(debugElement: DebugElement): DebugElement[];
static view(debugElement: DebugElement): DebugElement[];
}
class By {
static all(): Function;
static css(selector: string): Predicate<DebugElement>;
static directive(type: Type): Predicate<DebugElement>;
}
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.
*
* This exception is only thrown in dev mode.
*
* <!-- TODO: Add a link once the dev mode option is configurable -->
*
* ### Example
*
* ```typescript
* @Component({selector: 'parent'})
* @View({
* template: `
* <child [prop]="parentProp"></child>
* `,
* directives: [forwardRef(() => Child)]
* })
* class Parent {
* parentProp = "init";
* }
*
* @Directive({selector: 'child', inputs: ['prop']})
* class Child {
* constructor(public parent: Parent) {}
*
* set prop(v) {
* // this updates the parent property, which is disallowed during change detection
* // this will result in ExpressionChangedAfterItHasBeenCheckedException
* this.parent.parentProp = "updated";
* }
* }
* ```
*/
class ExpressionChangedAfterItHasBeenCheckedException extends BaseException {
constructor(exp: string, oldValue: any, currValue: any, context: any);
}
/**
* Thrown when an expression evaluation raises an exception.
*
* This error wraps the original exception to attach additional contextual information that can
* be useful for debugging.
*
* ### Example ([live demo](http://plnkr.co/edit/2Kywoz?p=preview))
*
* ```typescript
* @Directive({selector: 'child', inputs: ['prop']})
* class Child {
* prop;
* }
*
* @Component({
* selector: 'app'
* })
* @View({
* template: `
* <child [prop]="field.first"></child>
* `,
* directives: [Child]
* })
* class App {
* field = null;
* }
*
* bootstrap(App);
* ```
*
* You can access the original exception and stack through the `originalException` and
* `originalStack` properties.
*/
class ChangeDetectionError extends WrappedException {
constructor(exp: string, originalException: any, originalStack: any, context: any);
/**
* Information about the expression that triggered the exception.
*/
location: string;
}
/**
* Reference to a component's change detection object.
*/
interface ChangeDetectorRef {
/**
* Marks all {@link OnPush} ancestors as to be checked.
*
* <!-- TODO: Add a link to a chapter on OnPush components -->
*
* ### Example ([live demo](http://plnkr.co/edit/GC512b?p=preview))
*
* ```typescript
* @Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
* @View({template: `Number of ticks: {{numberOfTicks}}`})
* class Cmp {
* numberOfTicks = 0;
*
* constructor(ref: ChangeDetectorRef) {
* setInterval(() => {
* this.numberOfTicks ++
* // the following is required, otherwise the view will not be updated
* this.ref.markForCheck();
* }, 1000);
* }
* }
*
* @Component({
* selector: 'app',
* changeDetection: ChangeDetectionStrategy.OnPush
* })
* @View({
* template: `
* <cmp><cmp>
* `,
* directives: [Cmp]
* })
* class App {
* }
*
* bootstrap(App);
* ```
*/
markForCheck(): void;
/**
* Detaches the change detector from the change detector tree.
*
* The detached change detector will not be checked until it is reattached.
*
* This can also be used in combination with {@link detectChanges} to implement local change
* detection checks.
*
* <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
* <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
*
* ### Example
*
* The following example defines a component with a large list of readonly data.
* Imagine the data changes constantly, many times per second. For performance reasons,
* we want to check and update the list every five seconds. We can do that by detaching
* the component's change detector and doing a local check every five seconds.
*
* ```typescript
* class DataProvider {
* // in a real application the returned data will be different every time
* get data() {
* return [1,2,3,4,5];
* }
* }
*
* @Component({selector: 'giant-list'})
* @View({
* template: `
* <li *ng-for="#d of dataProvider.data">Data {{d}}</lig>
* `,
* directives: [NgFor]
* })
* class GiantList {
* constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {
* ref.detach();
* setInterval(() => {
* this.ref.detectChanges();
* }, 5000);
* }
* }
*
* @Component({
* selector: 'app', bindings: [DataProvider]
* })
* @View({
* template: `
* <giant-list><giant-list>
* `,
* directives: [GiantList]
* })
* class App {
* }
*
* bootstrap(App);
* ```
*/
detach(): void;
/**
* Checks the change detector and its children.
*
* This can also be used in combination with {@link detach} to implement local change detection
* checks.
*
* <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
* <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
*
* ### Example
*
* The following example defines a component with a large list of readonly data.
* Imagine, the data changes constantly, many times per second. For performance reasons,
* we want to check and update the list every five seconds.
*
* We can do that by detaching the component's change detector and doing a local change detection
* check
* every five seconds.
*
* See {@link detach} for more information.
*/
detectChanges(): void;
/**
* Reattach the change detector to the change detector tree.
*
* This also marks OnPush ancestors as to be checked. This reattached change detector will be
* checked during the next change detection run.
*
* <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
*
* ### Example ([live demo](http://plnkr.co/edit/aUhZha?p=preview))
*
* The following example creates a component displaying `live` data. The component will detach
* its change detector from the main change detector tree when the component's live property
* is set to false.
*
* ```typescript
* class DataProvider {
* data = 1;
*
* constructor() {
* setInterval(() => {
* this.data = this.data * 2;
* }, 500);
* }
* }
*
* @Component({selector: 'live-data', inputs: ['live']})
* @View({
* template: `Data: {{dataProvider.data}}`
* })
* class LiveData {
* constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {}
*
* set live(value) {
* if (value)
* this.ref.reattach();
* else
* this.ref.detach();
* }
* }
*
* @Component({
* selector: 'app',
* bindings: [DataProvider]
* })
* @View({
* template: `
* Live Update: <input type="checkbox" [(ng-model)]="live">
* <live-data [live]="live"><live-data>
* `,
* directives: [LiveData, FORM_DIRECTIVES]
* })
* class App {
* live = true;
* }
*
* bootstrap(App);
* ```
*/
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 {
constructor(wrapped: any);
static wrap(value: any): WrappedValue;
wrapped: any;
}
class SimpleChange {
constructor(previousValue: any, currentValue: any);
previousValue: any;
currentValue: any;
isFirstChange(): boolean;
}
/**
* To create a Pipe, you must implement this interface.
*
* Angular invokes the `transform` method with the value of a binding
* as the first argument, and any parameters as the second argument in list form.
*
* ## Syntax
*
* `value | pipeName[:arg0[:arg1...]]`
*
* ### Example ([live demo](http://plnkr.co/edit/f5oyIked9M2cKzvZNKHV?p=preview))
*
* The `RepeatPipe` below repeats the value as many times as indicated by the first argument:
*
* ```
* import {Pipe, PipeTransform} from 'angular2/angular2';
*
* @Pipe({name: 'repeat'})
* export class RepeatPipe implements PipeTransform {
* transform(value: any, args: any[] = []) {
* if (args.length == 0) {
* throw new Error('repeat pipe requires one argument');
* }
* let times: number = args[0];
* return value.repeat(times);
* }
* }
* ```
*
* Invoking `{{ 'ok' | repeat:3 }}` in a template produces `okokok`.
*/
interface PipeTransform {
transform(value: any, args: any[]): any;
}
/**
* To create a stateful Pipe, you should implement this interface.
*
* A stateful pipe may produce different output, given the same input. It is
* likely that a stateful pipe may contain state that should be cleaned up when
* a binding is destroyed. For example, a subscription to a stream of data may need to
* be disposed, or an interval may need to be cleared.
*
* ### Example ([live demo](http://plnkr.co/edit/hlaejwQAmWayxwc5YXQE?p=preview))
*
* In this example, a pipe is created to countdown its input value, updating it every
* 50ms. Because it maintains an internal interval, it automatically clears
* the interval when the binding is destroyed or the countdown completes.
*
* ```
* import {Pipe, PipeTransform} from 'angular2/angular2'
* @Pipe({name: 'countdown'})
* class CountDown implements PipeTransform, PipeOnDestroy {
* remainingTime:Number;
* interval:SetInterval;
* onDestroy() {
* if (this.interval) {
* clearInterval(this.interval);
* }
* }
* transform(value: any, args: any[] = []) {
* if (!parseInt(value, 10)) return null;
* if (typeof this.remainingTime !== 'number') {
* this.remainingTime = parseInt(value, 10);
* }
* if (!this.interval) {
* this.interval = setInterval(() => {
* this.remainingTime-=50;
* if (this.remainingTime <= 0) {
* this.remainingTime = 0;
* clearInterval(this.interval);
* delete this.interval;
* }
* }, 50);
* }
* return this.remainingTime;
* }
* }
* ```
*
* Invoking `{{ 10000 | countdown }}` would cause the value to be decremented by 50,
* every 50ms, until it reaches 0.
*/
interface PipeOnDestroy {
onDestroy(): void;
}
/**
* A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
*/
class IterableDiffers {
constructor(factories: IterableDifferFactory[]);
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 {
constructor(factories: KeyValueDifferFactory[]);
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;
}
/**
* Create trace scope.
*
* Scopes must be strictly nested and are analogous to stack frames, but
* do not have to follow the stack frames. Instead it is recommended that they follow logical
* nesting. You may want to use
* [Event
* Signatures](http://google.github.io/tracing-framework/instrumenting-code.html#custom-events)
* as they are defined in WTF.
*
* Used to mark scope entry. The return value is used to leave the scope.
*
* var myScope = wtfCreateScope('MyClass#myMethod(ascii someVal)');
*
* someMethod() {
* var s = myScope('Foo'); // 'Foo' gets stored in tracing UI
* // DO SOME WORK HERE
* return wtfLeave(s, 123); // Return value 123
* }
*
* Note, adding try-finally block around the work to ensure that `wtfLeave` gets called can
* negatively impact the performance of your application. For this reason we recommend that
* you don't add them to ensure that `wtfLeave` gets called. In production `wtfLeave` is a noop and
* so try-finally block has no value. When debugging perf issues, skipping `wtfLeave`, do to
* exception, will produce incorrect trace, but presence of exception signifies logic error which
* needs to be fixed before the app should be profiled. Add try-finally only when you expect that
* an exception is expected during normal execution while profiling.
*/
var wtfCreateScope: WtfScopeFn;
/**
* Used to mark end of Scope.
*
* - `scope` to end.
* - `returnValue` (optional) to be passed to the WTF.
*
* Returns the `returnValue for easy chaining.
*/
var wtfLeave: <T>(scope: any, returnValue?: T) => T;
/**
* Used to mark Async start. Async are similar to scope but they don't have to be strictly nested.
* The return value is used in the call to [endAsync]. Async ranges only work if WTF has been
* enabled.
*
* someMethod() {
* var s = wtfStartTimeRange('HTTP:GET', 'some.url');
* var future = new Future.delay(5).then((_) {
* wtfEndTimeRange(s);
* });
* }
*/
var wtfStartTimeRange: (rangeType: string, action: string) => any;
/**
* Ends a async time range operation.
* [range] is the return value from [wtfStartTimeRange] Async ranges only work if WTF has been
* enabled.
*/
var wtfEndTimeRange: (range: any) => void;
interface WtfScopeFn {
(arg0?: any, arg1?: any): any;
}
var ResolvedBinding: InjectableReference;
var InstantiationError: InjectableReference;
var PlatformRef: InjectableReference;
var ApplicationRef: InjectableReference;
var Compiler: InjectableReference;
var AppViewManager: InjectableReference;
var DynamicComponentLoader: InjectableReference;
var ElementRef: InjectableReference;
var TemplateRef: InjectableReference;
var ViewRef: InjectableReference;
var ProtoViewRef: InjectableReference;
var ViewContainerRef: InjectableReference;
var ComponentRef: InjectableReference;
var LifeCycle: InjectableReference;
var NgZone: InjectableReference;
var Renderer: InjectableReference;
var RenderProtoViewRef: InjectableReference;
var DebugElement: InjectableReference;
var ChangeDetectorRef: InjectableReference;
}
declare module "angular2/angular2" {
export = ng;
}
declare module ngWorker {
/**
* A dispatcher that relays all events that occur in a Render View.
*
* Use {@link Renderer#setEventDispatcher} to register a dispatcher for a particular Render View.
*/
interface RenderEventDispatcher {
/**
* Called when Event called `eventName` was triggered on an Element with an Event Binding for this
* Event.
*
* `elementIndex` specifies the depth-first index of the Element in the Render View.
*
* `locals` is a map for local variable to value mapping that should be used when evaluating the
* Event Binding expression.
*
* Returns `false` if `preventDefault` should be called to stop the default behavior of the Event
* in the Rendering Context.
*/
dispatchRenderEvent(elementIndex: number, eventName: string, locals: Map<string, any>): boolean;
}
/**
* Injectable service that provides a low-level interface for modifying the UI.
*
* Use this service to bypass Angular's templating and make custom UI changes that can't be
* expressed declaratively. For example if you need to set a property or an attribute whose name is
* not statically known, use {@link #setElementProperty} or {@link #setElementAttribute}
* respectively.
*
* If you are implementing a custom renderer, you must implement this interface.
*
* The default Renderer implementation is {@link DomRenderer}. Also see {@link WebWorkerRenderer}.
*/
interface Renderer {
/**
* Registers a component template represented as arrays of {@link RenderTemplateCmd}s and styles
* with the Renderer.
*
* Once a template is registered it can be referenced via {@link RenderBeginComponentCmd} when
* {@link #createProtoView creating Render ProtoView}.
*/
registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[], nativeShadow: boolean): void;
/**
* Creates a {@link RenderProtoViewRef} from an array of {@link RenderTemplateCmd}`s.
*/
createProtoView(cmds: RenderTemplateCmd[]): RenderProtoViewRef;
/**
* Creates a Root Host View based on the provided `hostProtoViewRef`.
*
* `fragmentCount` is the number of nested {@link RenderFragmentRef}s in this View. This parameter
* is non-optional so that the renderer can create a result synchronously even when application
* runs in a different context (e.g. in a Web Worker).
*
* `hostElementSelector` is a (CSS) selector for querying the main document to find the Host
* Element. The newly created Root Host View should be attached to this element.
*
* Returns an instance of {@link RenderViewWithFragments}, representing the Render View.
*/
createRootHostView(hostProtoViewRef: RenderProtoViewRef, fragmentCount: number, hostElementSelector: string): RenderViewWithFragments;
/**
* Creates a Render View based on the provided `protoViewRef`.
*
* `fragmentCount` is the number of nested {@link RenderFragmentRef}s in this View. This parameter
* is non-optional so that the renderer can create a result synchronously even when application
* runs in a different context (e.g. in a Web Worker).
*
* Returns an instance of {@link RenderViewWithFragments}, representing the Render View.
*/
createView(protoViewRef: RenderProtoViewRef, fragmentCount: number): RenderViewWithFragments;
/**
* Destroys a Render View specified via `viewRef`.
*
* This operation should be performed only on a View that has already been dehydrated and
* all of its Render Fragments have been detached.
*
* Destroying a View indicates to the Renderer that this View is not going to be referenced in any
* future operations. If the Renderer created any renderer-specific objects for this View, these
* objects should now be destroyed to prevent memory leaks.
*/
destroyView(viewRef: RenderViewRef): void;
/**
* Attaches the Nodes of a Render Fragment after the last Node of `previousFragmentRef`.
*/
attachFragmentAfterFragment(previousFragmentRef: RenderFragmentRef, fragmentRef: RenderFragmentRef): void;
/**
* Attaches the Nodes of the Render Fragment after an Element.
*/
attachFragmentAfterElement(elementRef: RenderElementRef, fragmentRef: RenderFragmentRef): void;
/**
* Detaches the Nodes of a Render Fragment from their parent.
*
* This operations should be called only on a View that has been already
* {@link #dehydrateView dehydrated}.
*/
detachFragment(fragmentRef: RenderFragmentRef): void;
/**
* Notifies a custom Renderer to initialize a Render View.
*
* This method is called by Angular after a Render View has been created, or when a previously
* dehydrated Render View is about to be reused.
*/
hydrateView(viewRef: RenderViewRef): void;
/**
* Notifies a custom Renderer that a Render View is no longer active.
*
* This method is called by Angular before a Render View will be destroyed, or when a hydrated
* Render View is about to be put into a pool for future reuse.
*/
dehydrateView(viewRef: RenderViewRef): void;
/**
* Returns the underlying native element at the specified `location`, or `null` if direct access
* to native elements is not supported (e.g. when the application runs in a web worker).
*
* <div class="callout is-critical">
* <header>Use with caution</header>
* <p>
* Use this api as the last resort when direct access to DOM is needed. Use templating and
* data-binding, or other {@link Renderer} methods instead.
* </p>
* <p>
* Relying on direct DOM access creates tight coupling between your application and rendering
* layers which will make it impossible to separate the two and deploy your application into a
* web worker.
* </p>
* </div>
*/
getNativeElementSync(location: RenderElementRef): any;
/**
* Sets a property on the Element specified via `location`.
*/
setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any): void;
/**
* Sets an attribute on the Element specified via `location`.
*
* If `attributeValue` is `null`, the attribute is removed.
*/
setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string): void;
/**
* Sets a (CSS) class on the Element specified via `location`.
*
* `isAdd` specifies if the class should be added or removed.
*/
setElementClass(location: RenderElementRef, className: string, isAdd: boolean): void;
/**
* Sets a (CSS) inline style on the Element specified via `location`.
*
* If `styleValue` is `null`, the style is removed.
*/
setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void;
/**
* Calls a method on the Element specified via `location`.
*/
invokeElementMethod(location: RenderElementRef, methodName: string, args: any[]): void;
/**
* Sets the value of an interpolated TextNode at the specified index to the `text` value.
*
* `textNodeIndex` is the depth-first index of the Node among interpolated Nodes in the Render
* View.
*/
setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void;
/**
* Sets a dispatcher to relay all events triggered in the given Render View.
*
* Each Render View can have only one Event Dispatcher, if this method is called multiple times,
* the last provided dispatcher will be used.
*/
setEventDispatcher(viewRef: RenderViewRef, dispatcher: RenderEventDispatcher): void;
}
/**
* Represents an Element that is part of a {@link RenderViewRef Render View}.
*
* `RenderElementRef` is a counterpart to {@link ElementRef} available in the Application Context.
*
* When using `Renderer` from the Application Context, `ElementRef` can be used instead of
* `RenderElementRef`.
*/
interface RenderElementRef {
/**
* Reference to the Render View that contains this Element.
*/
renderView: RenderViewRef;
/**
* Index of the Element (in the depth-first order) inside the Render View.
*
* This index is used internally by Angular to locate elements.
*/
boundElementIndex: number;
}
/**
* Represents an Angular View in the Rendering Context.
*
* `RenderViewRef` specifies to the {@link Renderer} what View to update or destroy.
*
* Unlike a {@link ViewRef} available in the Application Context, Render View contains all the
* static Component Views that have been recursively merged into a single Render View.
*
* Each `RenderViewRef` contains one or more {@link RenderFragmentRef Render Fragments}, these
* Fragments are created, hydrated, dehydrated and destroyed as a single unit together with the
* View.
*/
class RenderViewRef {
}
/**
* Represents an Angular ProtoView in the Rendering Context.
*
* When you implement a custom {@link Renderer}, `RenderProtoViewRef` specifies what Render View
* your renderer should create.
*
* `RenderProtoViewRef` is a counterpart to {@link ProtoViewRef} available in the Application
* Context. But unlike `ProtoViewRef`, `RenderProtoViewRef` contains all static nested Proto Views
* that are recursively merged into a single Render Proto View.
*
*
* <!-- TODO: this is created by Renderer#createProtoView in the new compiler -->
*/
interface RenderProtoViewRef {
}
/**
* Represents a list of sibling Nodes that can be moved by the {@link Renderer} independently of
* other Render Fragments.
*
* Any {@link RenderView} has one Render Fragment.
*
* Additionally any View with an Embedded View that contains a {@link NgContent View Projection}
* results in additional Render Fragment.
*/
class RenderFragmentRef {
}
/**
* Container class produced by a {@link Renderer} when creating a Render View.
*
* An instance of `RenderViewWithFragments` contains a {@link RenderViewRef} and an array of
* {@link RenderFragmentRef}s belonging to this Render View.
*/
class RenderViewWithFragments {
constructor(viewRef: RenderViewRef, fragmentRefs: RenderFragmentRef[]);
/**
* Reference to the {@link RenderViewRef}.
*/
viewRef: RenderViewRef;
/**
* Array of {@link RenderFragmentRef}s ordered in the depth-first order.
*/
fragmentRefs: RenderFragmentRef[];
}
interface RenderTemplateCmd {
visit(visitor: RenderCommandVisitor, context: any): any;
}
interface RenderCommandVisitor {
visitText(cmd: RenderTextCmd, context: any): any;
visitNgContent(cmd: RenderNgContentCmd, context: any): any;
visitBeginElement(cmd: RenderBeginElementCmd, context: any): any;
visitEndElement(context: any): any;
visitBeginComponent(cmd: RenderBeginComponentCmd, context: any): any;
visitEndComponent(context: any): any;
visitEmbeddedTemplate(cmd: RenderEmbeddedTemplateCmd, context: any): any;
}
interface RenderTextCmd extends RenderBeginCmd {
value: string;
}
interface RenderNgContentCmd {
ngContentIndex: number;
}
interface RenderBeginElementCmd extends RenderBeginCmd {
name: string;
attrNameAndValues: string[];
eventTargetAndNames: string[];
}
interface RenderBeginComponentCmd extends RenderBeginElementCmd {
nativeShadow: boolean;
templateId: number;
}
interface RenderEmbeddedTemplateCmd extends RenderBeginElementCmd {
isMerged: boolean;
children: RenderTemplateCmd[];
}
interface RenderBeginCmd extends RenderTemplateCmd {
ngContentIndex: number;
isBound: boolean;
}
let PRIMITIVE: Type;
/**
* Implement this interface to get notified when your directive's content has been fully
* initialized.
*
* ### Example ([live demo](http://plnkr.co/edit/plamXUpsLQbIXpViZhUO?p=preview))
*
* ```typescript
* @Component({selector: 'child-cmp'})
* @View({template: `{{where}} child`})
* class ChildComponent {
* @Property() where: string;
* }
*
* @Component({selector: 'parent-cmp'})
* @View({template: `<ng-content></ng-content>`})
* class ParentComponent implements AfterContentInit {
* @ContentChild(ChildComponent) contentChild: ChildComponent;
*
* constructor() {
* // contentChild is not initialized yet
* console.log(this.getMessage(this.contentChild));
* }
*
* afterContentInit() {
* // contentChild is updated after the content has been checked
* console.log('AfterContentInit: ' + this.getMessage(this.contentChild));
* }
*
* private getMessage(cmp: ChildComponent): string {
* return cmp ? cmp.where + ' child' : 'no child';
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <parent-cmp>
* <child-cmp where="content"></child-cmp>
* </parent-cmp>`,
* directives: [ParentComponent, ChildComponent]
* })
* export class App {
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface AfterContentInit {
afterContentInit(): void;
}
/**
* Implement this interface to get notified after every check of your directive's content.
*
* ### Example ([live demo](http://plnkr.co/edit/tGdrytNEKQnecIPkD7NU?p=preview))
*
* ```typescript
* @Component({selector: 'child-cmp'})
* @View({template: `{{where}} child`})
* class ChildComponent {
* @Property() where: string;
* }
*
* @Component({selector: 'parent-cmp'})
* @View({template: `<ng-content></ng-content>`})
* class ParentComponent implements AfterContentChecked {
* @ContentChild(ChildComponent) contentChild: ChildComponent;
*
* constructor() {
* // contentChild is not initialized yet
* console.log(this.getMessage(this.contentChild));
* }
*
* afterContentChecked() {
* // contentChild is updated after the content has been checked
* console.log('AfterContentChecked: ' + this.getMessage(this.contentChild));
* }
*
* private getMessage(cmp: ChildComponent): string {
* return cmp ? cmp.where + ' child' : 'no child';
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <parent-cmp>
* <button (click)="hasContent = !hasContent">Toggle content child</button>
* <child-cmp *ng-if="hasContent" where="content"></child-cmp>
* </parent-cmp>`,
* directives: [NgIf, ParentComponent, ChildComponent]
* })
* export class App {
* hasContent = true;
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface AfterContentChecked {
afterContentChecked(): void;
}
/**
* Implement this interface to get notified when your component's view has been fully initialized.
*
* ### Example ([live demo](http://plnkr.co/edit/LhTKVMEM0fkJgyp4CI1W?p=preview))
*
* ```typescript
* @Component({selector: 'child-cmp'})
* @View({template: `{{where}} child`})
* class ChildComponent {
* @Property() where: string;
* }
*
* @Component({selector: 'parent-cmp'})
* @View({
* template: `<child-cmp where="view"></child-cmp>`,
* directives: [ChildComponent]
* })
* class ParentComponent implements AfterViewInit {
* @ViewChild(ChildComponent) viewChild: ChildComponent;
*
* constructor() {
* // viewChild is not initialized yet
* console.log(this.getMessage(this.viewChild));
* }
*
* afterViewInit() {
* // viewChild is updated after the view has been initialized
* console.log('afterViewInit: ' + this.getMessage(this.viewChild));
* }
*
* private getMessage(cmp: ChildComponent): string {
* return cmp ? cmp.where + ' child' : 'no child';
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `<parent-cmp></parent-cmp>`,
* directives: [ParentComponent]
* })
* export class App {
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface AfterViewInit {
afterViewInit(): void;
}
/**
* Implement this interface to get notified after every check of your component's view.
*
* ### Example ([live demo](http://plnkr.co/edit/0qDGHcPQkc25CXhTNzKU?p=preview))
*
* ```typescript
* @Component({selector: 'child-cmp'})
* @View({template: `{{where}} child`})
* class ChildComponent {
* @Property() where: string;
* }
*
* @Component({selector: 'parent-cmp'})
* @View({
* template: `
* <button (click)="showView = !showView">Toggle view child</button>
* <child-cmp *ng-if="showView" where="view"></child-cmp>`,
* directives: [NgIf, ChildComponent]
* })
* class ParentComponent implements AfterViewChecked {
* @ViewChild(ChildComponent) viewChild: ChildComponent;
* showView = true;
*
* constructor() {
* // viewChild is not initialized yet
* console.log(this.getMessage(this.viewChild));
* }
*
* afterViewChecked() {
* // viewChild is updated after the view has been checked
* console.log('AfterViewChecked: ' + this.getMessage(this.viewChild));
* }
*
* private getMessage(cmp: ChildComponent): string {
* return cmp ? cmp.where + ' child' : 'no child';
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `<parent-cmp></parent-cmp>`,
* directives: [ParentComponent]
* })
* export class App {
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface AfterViewChecked {
afterViewChecked(): void;
}
/**
* Lifecycle hooks are guaranteed to be called in the following order:
* - `OnChanges` (if any bindings have changed),
* - `OnInit` (after the first check only),
* - `DoCheck`,
* - `AfterContentInit`,
* - `AfterContentChecked`,
* - `AfterViewInit`,
* - `AfterViewChecked`,
* - `OnDestroy` (at the very end before destruction)
* Implement this interface to get notified when any data-bound property of your directive changes.
*
* `onChanges` is called right after the data-bound properties have been checked and before view
* and content children are checked if at least one of them has changed.
*
* The `changes` parameter contains an entry for each of the changed data-bound property. The key is
* the property name and the value is an instance of {@link SimpleChange}.
*
* ### Example ([live example](http://plnkr.co/edit/AHrB6opLqHDBPkt4KpdT?p=preview)):
*
* ```typescript
* @Component({selector: 'my-cmp'})
* @View({template: `<p>myProp = {{myProp}}</p>`})
* class MyComponent implements OnChanges {
* @Property() myProp: any;
*
* onChanges(changes: {[propName: string]: SimpleChange}) {
* console.log('onChanges - myProp = ' + changes['myProp'].currentValue);
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <button (click)="value = value + 1">Change MyComponent</button>
* <my-cmp [my-prop]="value"></my-cmp>`,
* directives: [MyComponent]
* })
* export class App {
* value = 0;
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface OnChanges {
onChanges(changes: {[key: string]: SimpleChange}): void;
}
/**
* Implement this interface to get notified when your directive is destroyed.
*
* `onDestroy` callback is typically used for any custom cleanup that needs to occur when the
* instance is destroyed
*
* ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
*
* ```typesript
* @Component({selector: 'my-cmp'})
* @View({template: `<p>my-component</p>`})
* class MyComponent implements OnInit, OnDestroy {
* onInit() {
* console.log('onInit');
* }
*
* onDestroy() {
* console.log('onDestroy');
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <button (click)="hasChild = !hasChild">
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent
* </button>
* <my-cmp *ng-if="hasChild"></my-cmp>`,
* directives: [MyComponent, NgIf]
* })
* export class App {
* hasChild = true;
* }
*
* bootstrap(App).catch(err => console.error(err));
* * ```
*/
interface OnDestroy {
onDestroy(): void;
}
/**
* Implement this interface to execute custom initialization logic after your directive's
* data-bound properties have been initialized.
*
* `onInit` is called right after the directive's data-bound properties have been checked for the
* first time, and before any of its children have been checked. It is invoked only once when the
* directive is instantiated.
*
* ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
*
* ```typescript
* @Component({selector: 'my-cmp'})
* @View({template: `<p>my-component</p>`})
* class MyComponent implements OnInit, OnDestroy {
* onInit() {
* console.log('onInit');
* }
*
* onDestroy() {
* console.log('onDestroy');
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <button (click)="hasChild = !hasChild">
* {{hasChild ? 'Destroy' : 'Create'}} MyComponent
* </button>
* <my-cmp *ng-if="hasChild"></my-cmp>`,
* directives: [MyComponent, NgIf]
* })
* export class App {
* hasChild = true;
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
interface OnInit {
onInit(): void;
}
/**
* Implement this interface to override the default change detection algorithm for your directive.
*
* `doCheck` gets called to check the changes in the directives instead of the default algorithm.
*
* The default change detection algorithm looks for differences by comparing bound-property values
* by reference across change detection runs. When `DoCheck` is implemented, the default algorithm
* is disabled and `doCheck` is responsible for checking for changes.
*
* Implementing this interface allows improving performance by using insights about the component,
* its implementation and data types of its properties.
*
* Note that a directive should not implement both `DoCheck` and {@link OnChanges} at the same time.
* `onChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes
* have to be handled from within the `doCheck` callback.
*
* Use {@link KeyValueDiffers} and {@link IterableDiffers} to add your custom check mechanisms.
*
* ### Example ([live demo](http://plnkr.co/edit/QpnIlF0CR2i5bcYbHEUJ?p=preview))
*
* In the following example `doCheck` uses an {@link IterableDiffers} to detect the updates to the
* array `list`:
*
* ```typescript
* @Component({selector: 'custom-check'})
* @View({
* template: `
* <p>Changes:</p>
* <ul>
* <li *ng-for="#line of logs">{{line}}</li>
* </ul>`,
* directives: [NgFor]
* })
* class CustomCheckComponent implements DoCheck {
* @Property() list: any[];
* differ: any;
* logs = [];
*
* constructor(differs: IterableDiffers) {
* this.differ = differs.find([]).create(null);
* }
*
* doCheck() {
* var changes = this.differ.diff(this.list);
*
* if (changes) {
* changes.forEachAddedItem(r => this.logs.push('added ' + r.item));
* changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item))
* }
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <button (click)="list.push(list.length)">Push</button>
* <button (click)="list.pop()">Pop</button>
* <custom-check [list]="list"></custom-check>`,
* directives: [CustomCheckComponent]
* })
* export class App {
* list = [];
* }
* ```
*/
interface DoCheck {
doCheck(): void;
}
/**
* Declares an injectable parameter to be a live list of directives or variable
* bindings from the content children of a directive.
*
* ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
*
* Assume that `<tabs>` component would like to get a list its children `<pane>`
* components as shown in this example:
*
* ```html
* <tabs>
* <pane title="Overview">...</pane>
* <pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane>
* </tabs>
* ```
*
* The preferred solution is to query for `Pane` directives using this decorator.
*
* ```javascript
* @Component({
* selector: 'pane',
* inputs: ['title']
* })
* @View(...)
* class Pane {
* title:string;
* }
*
* @Component({
* selector: 'tabs'
* })
* @View({
* template: `
* <ul>
* <li *ng-for="#pane of panes">{{pane.title}}</li>
* </ul>
* <content></content>
* `
* })
* class Tabs {
* panes: QueryList<Pane>;
* constructor(@Query(Pane) panes:QueryList<Pane>) {
* this.panes = panes;
* }
* }
* ```
*
* A query can look for variable bindings by passing in a string with desired binding symbol.
*
* ### Example ([live demo](http://plnkr.co/edit/sT2j25cH1dURAyBRCKx1?p=preview))
* ```html
* <seeker>
* <div #findme>...</div>
* </seeker>
*
* @Component({
* selector: 'foo'
* })
* @View(...)
* class seeker {
* constructor(@Query('findme') elList: QueryList<ElementRef>) {...}
* }
* ```
*
* In this case the object that is injected depend on the type of the variable
* binding. It can be an ElementRef, a directive or a component.
*
* Passing in a comma separated list of variable bindings will query for all of them.
*
* ```html
* <seeker>
* <div #find-me>...</div>
* <div #find-me-too>...</div>
* </seeker>
*
* @Component({
* selector: 'foo'
* })
* @View(...)
* class Seeker {
* constructor(@Query('findMe, findMeToo') elList: QueryList<ElementRef>) {...}
* }
* ```
*
* Configure whether query looks for direct children or all descendants
* of the querying element, by using the `descendants` parameter.
* It is set to `false` by default.
*
* ### Example ([live demo](http://plnkr.co/edit/wtGeB977bv7qvA5FTYl9?p=preview))
* ```html
* <container #first>
* <item>a</item>
* <item>b</item>
* <container #second>
* <item>c</item>
* </container>
* </container>
* ```
*
* When querying for items, the first container will see only `a` and `b` by default,
* but with `Query(TextDirective, {descendants: true})` it will see `c` too.
*
* The queried directives are kept in a depth-first pre-order with respect to their
* positions in the DOM.
*
* Query does not look deep into any subcomponent views.
*
* Query is updated as part of the change-detection cycle. Since change detection
* happens after construction of a directive, QueryList will always be empty when observed in the
* constructor.
*
* The injected object is an unmodifiable live list.
* See {@link QueryList} for more details.
*/
class QueryMetadata extends DependencyMetadata {
constructor(_selector: Type | string, {descendants, first}?: {descendants?: boolean, first?: boolean});
/**
* whether we want to query only direct children (false) or all
* children (true).
*/
descendants: boolean;
first: boolean;
/**
* always `false` to differentiate it with {@link ViewQueryMetadata}.
*/
isViewQuery: boolean;
/**
* what this is querying for.
*/
selector: any;
/**
* whether this is querying for a variable binding or a directive.
*/
isVarBindingQuery: boolean;
/**
* returns a list of variable bindings this is querying for.
* Only applicable if this is a variable bindings query.
*/
varBindings: string[];
toString(): string;
}
/**
* Configures a content query.
*
* Content queries are set before the `afterContentInit` callback is called.
*
* ### Example
*
* ```
* @Directive({
* selector: 'someDir'
* })
* class SomeDir {
* @ContentChildren(ChildDirective) contentChildren: QueryList<ChildDirective>;
*
* afterContentInit() {
* // contentChildren is set
* }
* }
* ```
*/
class ContentChildrenMetadata extends QueryMetadata {
constructor(_selector: Type | string, {descendants}?: {descendants?: boolean});
}
/**
* Configures a content query.
*
* Content queries are set before the `afterContentInit` callback is called.
*
* ### Example
*
* ```
* @Directive({
* selector: 'someDir'
* })
* class SomeDir {
* @ContentChild(ChildDirective) contentChild;
*
* afterContentInit() {
* // contentChild is set
* }
* }
* ```
*/
class ContentChildMetadata extends QueryMetadata {
constructor(_selector: Type | string);
}
/**
* Configures a view query.
*
* View queries are set before the `afterViewInit` callback is called.
*
* ### Example
*
* ```
* @Component({
* selector: 'someDir'
* })
* @View({templateUrl: 'someTemplate', directives: [ItemDirective]})
* class SomeDir {
* @ViewChildren(ItemDirective) viewChildren: QueryList<ItemDirective>;
*
* afterViewInit() {
* // viewChildren is set
* }
* }
* ```
*/
class ViewChildrenMetadata extends ViewQueryMetadata {
constructor(_selector: Type | string);
}
/**
* Similar to {@link QueryMetadata}, but querying the component view, instead of
* the content children.
*
* ### Example ([live demo](http://plnkr.co/edit/eNsFHDf7YjyM6IzKxM1j?p=preview))
*
* ```javascript
* @Component({...})
* @View({
* template: `
* <item> a </item>
* <item> b </item>
* <item> c </item>
* `
* })
* class MyComponent {
* shown: boolean;
*
* constructor(private @Query(Item) items:QueryList<Item>) {
* items.onChange(() => console.log(items.length));
* }
* }
* ```
*
* Supports the same querying parameters as {@link QueryMetadata}, except
* `descendants`. This always queries the whole view.
*
* As `shown` is flipped between true and false, items will contain zero of one
* items.
*
* Specifies that a {@link QueryList} should be injected.
*
* The injected object is an iterable and observable live list.
* See {@link QueryList} for more details.
*/
class ViewQueryMetadata extends QueryMetadata {
constructor(_selector: Type | string, {descendants, first}?: {descendants?: boolean, first?: boolean});
/**
* always `true` to differentiate it with {@link QueryMetadata}.
*/
isViewQuery: any;
toString(): string;
}
/**
* Configures a view query.
*
* View queries are set before the `afterViewInit` callback is called.
*
* ### Example
*
* ```
* @Component({
* selector: 'someDir'
* })
* @View({templateUrl: 'someTemplate', directives: [ItemDirective]})
* class SomeDir {
* @ViewChild(ItemDirective) viewChild:ItemDirective;
*
* afterViewInit() {
* // viewChild is set
* }
* }
* ```
*/
class ViewChildMetadata extends ViewQueryMetadata {
constructor(_selector: Type | 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 `<input>` element and want to know its `type`.
*
* ```html
* <input type="text">
* ```
*
* 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 {
constructor(attributeName: string);
attributeName: string;
token: any;
toString(): string;
}
/**
* Declare reusable UI building blocks for an application.
*
* Each Angular component requires a single `@Component` and at least one `@View` annotation. The
* `@Component`
* annotation specifies when a component is instantiated, and which properties and hostListeners it
* binds to.
*
* When a component is instantiated, Angular
* - creates a shadow DOM for the component.
* - loads the selected template into the shadow DOM.
* - creates all the injectable objects configured with `bindings` and `viewBindings`.
*
* All template expressions and statements are then evaluated against the component instance.
*
* For details on the `@View` annotation, see {@link ViewMetadata}.
*
* ## Lifecycle hooks
*
* When the component class implements some {@link angular2/lifecycle_hooks} the callbacks are
* called by the change detection at defined points in time during the life of the component.
*
* ## Example
*
* ```
* @Component({
* selector: 'greet'
* })
* @View({
* template: 'Hello {{name}}!'
* })
* class Greet {
* name: string;
*
* constructor() {
* this.name = 'World';
* }
* }
* ```
*/
class ComponentMetadata extends DirectiveMetadata {
constructor({selector, inputs, outputs, properties, events, host, exportAs, moduleId, bindings,
viewBindings, changeDetection, queries}?: {
selector?: string,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
viewBindings?: any[],
queries?: {[key: string]: any},
changeDetection?: ChangeDetectionStrategy,
});
/**
* Defines the used change detection strategy.
*
* When a component is instantiated, Angular creates a change detector, which is responsible for
* propagating the component's bindings.
*
* The `changeDetection` property defines, whether the change detection will be checked every time
* or only when the component tells it to do so.
*/
changeDetection: ChangeDetectionStrategy;
/**
* Defines the set of injectable objects that are visible to its view 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: 'needs-greeter'
* })
* class NeedsGreeter {
* greeter:Greeter;
*
* constructor(greeter:Greeter) {
* this.greeter = greeter;
* }
* }
*
* @Component({
* selector: 'greet',
* viewBindings: [
* Greeter
* ]
* })
* @View({
* template: `<needs-greeter></needs-greeter>`,
* directives: [NeedsGreeter]
* })
* class HelloWorld {
* }
*
* ```
*/
viewBindings: any[];
}
/**
* Directives allow you to attach behavior to elements in the DOM.
*
* {@link DirectiveMetadata}s with an embedded view are called {@link ComponentMetadata}s.
*
* A directive consists of a single directive annotation and a controller class. When the
* directive's `selector` matches
* elements in the DOM, the following steps occur:
*
* 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor
* arguments.
* 2. Angular instantiates directives for each matched element using `ElementInjector` in a
* depth-first order,
* as declared in the HTML.
*
* ## Understanding How Injection Works
*
* There are three stages of injection resolution.
* - *Pre-existing Injectors*:
* - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if
* the dependency was
* specified as `@Optional`, returns `null`.
* - The platform injector resolves browser singleton resources, such as: cookies, title,
* location, and others.
* - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow
* the same parent-child hierarchy
* as the component instances in the DOM.
* - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each
* element has an `ElementInjector`
* which follow the same parent-child hierarchy as the DOM elements themselves.
*
* When a template is instantiated, it also must instantiate the corresponding directives in a
* depth-first order. The
* current `ElementInjector` resolves the constructor dependencies for each directive.
*
* Angular then resolves dependencies as follows, according to the order in which they appear in the
* {@link ViewMetadata}:
*
* 1. Dependencies on the current element
* 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
* 3. Dependencies on component injectors and their parents until it encounters the root component
* 4. Dependencies on pre-existing injectors
*
*
* The `ElementInjector` can inject other directives, element-specific special objects, or it can
* delegate to the parent
* injector.
*
* To inject other directives, declare the constructor parameter as:
* - `directive:DirectiveType`: a directive on the current element only
* - `@Host() directive:DirectiveType`: any directive that matches the type between the current
* element and the
* Shadow DOM root.
* - `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child
* directives.
* - `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any
* child directives.
*
* To inject element-specific special objects, declare the constructor parameter as:
* - `element: ElementRef` to obtain a reference to logical element in the view.
* - `viewContainer: ViewContainerRef` to control child template instantiation, for
* {@link DirectiveMetadata} directives only
* - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
*
* ## Example
*
* The following example demonstrates how dependency injection resolves constructor arguments in
* practice.
*
*
* Assume this HTML template:
*
* ```
* <div dependency="1">
* <div dependency="2">
* <div dependency="3" my-directive>
* <div dependency="4">
* <div dependency="5"></div>
* </div>
* <div dependency="6"></div>
* </div>
* </div>
* </div>
* ```
*
* With the following `dependency` decorator and `SomeService` injectable class.
*
* ```
* @Injectable()
* class SomeService {
* }
*
* @Directive({
* selector: '[dependency]',
* inputs: [
* 'id: dependency'
* ]
* })
* class Dependency {
* id:string;
* }
* ```
*
* Let's step through the different ways in which `MyDirective` could be declared...
*
*
* ### No injection
*
* Here the constructor is declared with no arguments, therefore nothing is injected into
* `MyDirective`.
*
* ```
* @Directive({ selector: '[my-directive]' })
* class MyDirective {
* constructor() {
* }
* }
* ```
*
* This directive would be instantiated with no dependencies.
*
*
* ### Component-level injection
*
* Directives can inject any injectable instance from the closest component injector or any of its
* parents.
*
* Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type
* from the parent
* component's injector.
* ```
* @Directive({ selector: '[my-directive]' })
* class MyDirective {
* constructor(someService: SomeService) {
* }
* }
* ```
*
* This directive would be instantiated with a dependency on `SomeService`.
*
*
* ### Injecting a directive from the current element
*
* Directives can inject other directives declared on the current element.
*
* ```
* @Directive({ selector: '[my-directive]' })
* class MyDirective {
* constructor(dependency: Dependency) {
* expect(dependency.id).toEqual(3);
* }
* }
* ```
* This directive would be instantiated with `Dependency` declared at the same element, in this case
* `dependency="3"`.
*
* ### Injecting a directive from any ancestor elements
*
* Directives can inject other directives declared on any ancestor element (in the current Shadow
* DOM), i.e. on the current element, the
* parent element, or its parents.
* ```
* @Directive({ selector: '[my-directive]' })
* class MyDirective {
* constructor(@Host() dependency: Dependency) {
* expect(dependency.id).toEqual(2);
* }
* }
* ```
*
* `@Host` checks the current element, the parent, as well as its parents recursively. If
* `dependency="2"` didn't
* exist on the direct parent, this injection would
* have returned
* `dependency="1"`.
*
*
* ### Injecting a live collection of direct child directives
*
*
* A directive can also query for other child directives. Since parent directives are instantiated
* before child directives, a directive can't simply inject the list of child directives. Instead,
* the directive injects a {@link QueryList}, which updates its contents as children are added,
* removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an
* `ng-if`, or an `ng-switch`.
*
* ```
* @Directive({ selector: '[my-directive]' })
* class MyDirective {
* constructor(@Query(Dependency) dependencies:QueryList<Dependency>) {
* }
* }
* ```
*
* This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and
* 6. Here, `Dependency` 5 would not be included, because it is not a direct child.
*
* ### Injecting a live collection of descendant directives
*
* By passing the descendant flag to `@Query` above, we can include the children of the child
* elements.
*
* ```
* @Directive({ selector: '[my-directive]' })
* class MyDirective {
* constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList<Dependency>) {
* }
* }
* ```
*
* This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.
*
* ### Optional injection
*
* The normal behavior of directives is to return an error when a specified dependency cannot be
* resolved. If you
* would like to inject `null` on unresolved dependency instead, you can annotate that dependency
* with `@Optional()`.
* This explicitly permits the author of a template to treat some of the surrounding directives as
* optional.
*
* ```
* @Directive({ selector: '[my-directive]' })
* class MyDirective {
* constructor(@Optional() dependency:Dependency) {
* }
* }
* ```
*
* This directive would be instantiated with a `Dependency` directive found on the current element.
* If none can be
* found, the injector supplies `null` instead of throwing an error.
*
* ## Example
*
* Here we use a decorator directive to simply define basic tool-tip behavior.
*
* ```
* @Directive({
* selector: '[tooltip]',
* inputs: [
* 'text: tooltip'
* ],
* host: {
* '(mouseenter)': 'onMouseEnter()',
* '(mouseleave)': 'onMouseLeave()'
* }
* })
* class Tooltip{
* text:string;
* overlay:Overlay; // NOT YET IMPLEMENTED
* overlayManager:OverlayManager; // NOT YET IMPLEMENTED
*
* constructor(overlayManager:OverlayManager) {
* this.overlay = overlay;
* }
*
* onMouseEnter() {
* // exact signature to be determined
* this.overlay = this.overlayManager.open(text, ...);
* }
*
* onMouseLeave() {
* this.overlay.close();
* this.overlay = null;
* }
* }
* ```
* In our HTML template, we can then add this behavior to a `<div>` or any other element with the
* `tooltip` selector,
* like so:
*
* ```
* <div tooltip="some text here"></div>
* ```
*
* Directives can also control the instantiation, destruction, and positioning of inline template
* elements:
*
* A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at
* runtime.
* The {@link ViewContainerRef} is created as a result of `<template>` element, and represents a
* location in the current view
* where these actions are performed.
*
* Views are always created as children of the current {@link ViewMetadata}, and as siblings of the
* `<template>` element. Thus a
* directive in a child view cannot inject the directive that created it.
*
* Since directives that create views via ViewContainers are common in Angular, and using the full
* `<template>` element syntax is wordy, Angular
* also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are
* equivalent.
*
* Thus,
*
* ```
* <ul>
* <li *foo="bar" title="text"></li>
* </ul>
* ```
*
* Expands in use to:
*
* ```
* <ul>
* <template [foo]="bar">
* <li title="text"></li>
* </template>
* </ul>
* ```
*
* Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for
* the directive
* controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
*
* ## Lifecycle hooks
*
* When the directive class implements some {@link angular2/lifecycle_hooks} the callbacks are
* called by the change detection at defined points in time during the life of the directive.
*
* ## Example
*
* Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
*
* Here is a simple directive that triggers on an `unless` selector:
*
* ```
* @Directive({
* selector: '[unless]',
* inputs: ['unless']
* })
* export class Unless {
* viewContainer: ViewContainerRef;
* templateRef: TemplateRef;
* prevCondition: boolean;
*
* constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef) {
* this.viewContainer = viewContainer;
* this.templateRef = templateRef;
* this.prevCondition = null;
* }
*
* set unless(newCondition) {
* if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
* this.prevCondition = true;
* this.viewContainer.clear();
* } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
* this.prevCondition = false;
* this.viewContainer.create(this.templateRef);
* }
* }
* }
* ```
*
* We can then use this `unless` selector in a template:
* ```
* <ul>
* <li *unless="expr"></li>
* </ul>
* ```
*
* Once the directive instantiates the child view, the shorthand notation for the template expands
* and the result is:
*
* ```
* <ul>
* <template [unless]="exp">
* <li></li>
* </template>
* <li></li>
* </ul>
* ```
*
* Note also that although the `<li></li>` template still exists inside the `<template></template>`,
* the instantiated
* view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
*/
class DirectiveMetadata extends InjectableMetadata {
constructor({selector, inputs, outputs, properties, events, host, bindings, exportAs, moduleId,
queries}?: {
selector?: string,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
queries?: {[key: string]: any}
});
/**
* The CSS selector that triggers the instantiation of a directive.
*
* Angular only allows directives to trigger on CSS selectors that do not cross element
* boundaries.
*
* `selector` may be declared 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.
*
*
* ## Example
*
* Suppose we have a directive with an `input[type=text]` selector.
*
* And the following HTML:
*
* ```html
* <form>
* <input type="text">
* <input type="radio">
* <form>
* ```
*
* The directive would only be instantiated on the `<input type="text">` element.
*/
selector: string;
/**
* 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`.
*
* ### Example ([live demo](http://plnkr.co/edit/ivhfXY?p=preview))
*
* The following example creates a component with two data-bound properties.
*
* ```typescript
* @Component({
* selector: 'bank-account',
* inputs: ['bankName', 'id: account-id']
* })
* @View({
* template: `
* Bank Name: {{bankName}}
* Account Id: {{id}}
* `
* })
* class BankAccount {
* bankName: string;
* id: string;
*
* // this property is not bound, and won't be automatically updated by Angular
* normalizedBankName: string;
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <bank-account bank-name="RBC" account-id="4747"></bank-account>
* `,
* directives: [BankAccount]
* })
* class App {}
*
* bootstrap(App);
* ```
*/
inputs: string[];
/**
* @deprecated
* Same as `inputs`. This is to enable easier migration.
*/
properties: string[];
/**
* Enumerates the set of event-bound output properties.
*
* When an output property emits an event, an event handler attached to that event
* 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.
*
* ### Example ([live demo](http://plnkr.co/edit/d5CNq7?p=preview))
*
* ```typescript
* @Directive({
* selector: 'interval-dir',
* outputs: ['everySecond', 'five5Secs: everyFiveSeconds']
* })
* class IntervalDir {
* everySecond = new EventEmitter();
* five5Secs = new EventEmitter();
*
* constructor() {
* setInterval(() => this.everySecond.next("event"), 1000);
* setInterval(() => this.five5Secs.next("event"), 5000);
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
* </interval-dir>
* `,
* directives: [IntervalDir]
* })
* class App {
* everySecond() { console.log('second'); }
* everyFiveSeconds() { console.log('five seconds'); }
* }
* bootstrap(App);
* ```
*/
outputs: string[];
/**
* @deprecated
* Same as `outputs`. This is to enable easier migration.
*/
events: string[];
/**
* Specify the events, actions, properties and attributes related to the host element.
*
* ## Host Listeners
*
* Specifies which DOM events 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 evaluation 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 $event local variable.
*
* ### Example ([live demo](http://plnkr.co/edit/DlA5KU?p=preview))
*
* The following example declares a directive that attaches a click listener to the button and
* counts clicks.
*
* ```typescript
* @Directive({
* selector: 'button[counting]',
* host: {
* '(click)': 'onClick($event.target)'
* }
* })
* class CountClicks {
* numberOfClicks = 0;
*
* onClick(btn) {
* console.log("button", btn, "number of clicks:", this.numberOfClicks++);
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `<button counting>Increment</button>`,
* directives: [CountClicks]
* })
* class App {}
*
* bootstrap(App);
* ```
*
* ## Host Property Bindings
*
* Specifies which DOM properties a directive updates.
*
* Angular automatically checks host property bindings during change detection.
* If a binding changes, it will update the host element of the directive.
*
* ### Example ([live demo](http://plnkr.co/edit/gNg0ED?p=preview))
*
* The following example creates a directive that sets the `valid` and `invalid` classes
* on the DOM element that has ng-model directive on it.
*
* ```typescript
* @Directive({
* selector: '[ng-model]',
* host: {
* '[class.valid]': 'valid',
* '[class.invalid]': 'invalid'
* }
* })
* class NgModelStatus {
* constructor(public control:NgModel) {}
* get valid { return this.control.valid; }
* get invalid { return this.control.invalid; }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `<input [(ng-model)]="prop">`,
* directives: [FORM_DIRECTIVES, NgModelStatus]
* })
* class App {
* prop;
* }
*
* bootstrap(App);
* ```
*
* ## Attributes
*
* Specifies static attributes that should be propagated to a host element.
*
* ### Example
*
* In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element
* (here: `<div>` ) will ensure that this element will get the "button" role.
*
* ```typescript
* @Directive({
* selector: '[my-button]',
* host: {
* 'role': 'button'
* }
* })
* class MyButton {
* }
* ```
*/
host: {[key: string]: string};
/**
* 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: `<child-dir #c="child"></child-dir>`,
* directives: [ChildDir]
* })
* class MainComponent {
* }
*
* ```
*/
exportAs: string;
/**
* The module id of the module that contains the directive.
* Needed to be able to resolve relative urls for templates and styles.
* In Dart, this can be determined automatically and does not need to be set.
* In CommonJS, this can always be set to `module.id`.
*
* ## Simple Example
*
* ```
* @Directive({
* selector: 'someDir',
* moduleId: module.id
* })
* class SomeDir {
* }
*
* ```
*/
moduleId: string;
/**
* Configures the queries that will be injected into the directive.
*
* Content queries are set before the `afterContentInit` callback is called.
* View queries are set before the `afterViewInit` callback is called.
*
* ### Example
*
* ```
* @Component({
* selector: 'someDir',
* queries: {
* contentChildren: new ContentChildren(ChildDirective),
* viewChildren: new ViewChildren(ChildDirective)
* }
* })
* @View({
* template: '<child-directive></child-directive>',
* directives: [ChildDirective]
* })
* class SomeDir {
* contentChildren: QueryList<ChildDirective>,
* viewChildren: QueryList<ChildDirective>
*
* afterContentInit() {
* // contentChildren is set
* }
*
* afterViewInit() {
* // viewChildren is set
* }
* }
* ```
*/
queries: {[key: string]: any};
}
/**
* Declare reusable pipe function.
*
* ## Example
*
* ```
* @Pipe({
* name: 'lowercase'
* })
* class Lowercase {
* transform(v, args) { return v.toLowerCase(); }
* }
* ```
*/
class PipeMetadata extends InjectableMetadata {
constructor({name, pure}: {name: string, pure: boolean});
name: string;
pure: boolean;
}
/**
* Declares a data-bound input property.
*
* Angular automatically updates data-bound properties during change detection.
*
* `InputMetadata` takes an optional parameter that specifies the name
* used when instantiating a component in the template. When not provided,
* the name of the decorated property is used.
*
* ### Example
*
* The following example creates a component with two input properties.
*
* ```typescript
* @Component({selector: 'bank-account'})
* @View({
* template: `
* Bank Name: {{bankName}}
* Account Id: {{id}}
* `
* })
* class BankAccount {
* @Input() bankName: string;
* @Input('account-id') id: string;
*
* // this property is not bound, and won't be automatically updated by Angular
* normalizedBankName: string;
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <bank-account bank-name="RBC" account-id="4747"></bank-account>
* `,
* directives: [BankAccount]
* })
* class App {}
*
* bootstrap(App);
* ```
*/
class InputMetadata {
constructor(bindingPropertyName?: string);
/**
* Name used when instantiating a component in the temlate.
*/
bindingPropertyName: string;
}
/**
* Declares an event-bound output property.
*
* When an output property emits an event, an event handler attached to that event
* the template is invoked.
*
* `OutputMetadata` takes an optional parameter that specifies the name
* used when instantiating a component in the template. When not provided,
* the name of the decorated property is used.
*
* ### Example
*
* ```typescript
* @Directive({
* selector: 'interval-dir',
* })
* class IntervalDir {
* @Output() everySecond = new EventEmitter();
* @Output('everyFiveSeconds') five5Secs = new EventEmitter();
*
* constructor() {
* setInterval(() => this.everySecond.next("event"), 1000);
* setInterval(() => this.five5Secs.next("event"), 5000);
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `
* <interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
* </interval-dir>
* `,
* directives: [IntervalDir]
* })
* class App {
* everySecond() { console.log('second'); }
* everyFiveSeconds() { console.log('five seconds'); }
* }
* bootstrap(App);
* ```
*/
class OutputMetadata {
constructor(bindingPropertyName?: string);
bindingPropertyName: string;
}
/**
* Declares a host property binding.
*
* Angular automatically checks host property bindings during change detection.
* If a binding changes, it will update the host element of the directive.
*
* `HostBindingMetadata` takes an optional parameter that specifies the property
* name of the host element that will be updated. When not provided,
* the class property name is used.
*
* ### Example
*
* The following example creates a directive that sets the `valid` and `invalid` classes
* on the DOM element that has ng-model directive on it.
*
* ```typescript
* @Directive({selector: '[ng-model]'})
* class NgModelStatus {
* constructor(public control:NgModel) {}
* @HostBinding('[class.valid]') get valid { return this.control.valid; }
* @HostBinding('[class.invalid]') get invalid { return this.control.invalid; }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `<input [(ng-model)]="prop">`,
* directives: [FORM_DIRECTIVES, NgModelStatus]
* })
* class App {
* prop;
* }
*
* bootstrap(App);
* ```
*/
class HostBindingMetadata {
constructor(hostPropertyName?: string);
hostPropertyName: string;
}
/**
* Declares a host listener.
*
* Angular will invoke the decorated method when the host element emits the specified event.
*
* If the decorated method returns `false`, then `preventDefault` is applied on the DOM
* event.
*
* ### Example
*
* The following example declares a directive that attaches a click listener to the button and
* counts clicks.
*
* ```typescript
* @Directive({selector: 'button[counting]'})
* class CountClicks {
* numberOfClicks = 0;
*
* @HostListener('click', ['$event.target'])
* onClick(btn) {
* console.log("button", btn, "number of clicks:", this.numberOfClicks++);
* }
* }
*
* @Component({selector: 'app'})
* @View({
* template: `<button counting>Increment</button>`,
* directives: [CountClicks]
* })
* class App {}
*
* bootstrap(App);
* ```
*/
class HostListenerMetadata {
constructor(eventName: string, args?: string[]);
eventName: string;
args: string[];
}
/**
* Metadata properties available for configuring Views.
*
* 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 {
constructor({templateUrl, template, directives, pipes, encapsulation, styles, styleUrls}?: {
templateUrl?: string,
template?: string,
directives?: Array<Type | any[]>,
pipes?: Array<Type | any[]>,
encapsulation?: ViewEncapsulation,
styles?: string[],
styleUrls?: string[],
});
/**
* Specifies a template URL for an Angular component.
*
* NOTE: Only one of `templateUrl` or `template` can be defined per View.
*
* <!-- TODO: what's the url relative to? -->
*/
templateUrl: string;
/**
* Specifies an inline template for an Angular component.
*
* NOTE: Only one of `templateUrl` or `template` can be defined per View.
*/
template: string;
/**
* Specifies stylesheet URLs for an Angular component.
*
* <!-- TODO: what's the url relative to? -->
*/
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: [NgFor]
* template: '
* <ul>
* <li *ng-for="#item of items">{{item}}</li>
* </ul>'
* })
* class MyComponent {
* }
* ```
*/
directives: Array<Type | any[]>;
pipes: Array<Type | any[]>;
/**
* 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;
}
/**
* Defines template and style encapsulation options available for Component's {@link View}.
*
* See {@link ViewMetadata#encapsulation}.
*/
enum ViewEncapsulation {
/**
* Emulate `Native` scoping of styles by adding an attribute containing surrogate id to the Host
* Element and pre-processing the style rules provided via
* {@link ViewMetadata#styles} or {@link ViewMetadata#stylesUrls}, and adding the new Host Element
* attribute to all selectors.
*
* This is the default option.
*/
Emulated,
/**
* Use the native encapsulation mechanism of the renderer.
*
* For the DOM this means using [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) and
* creating a ShadowRoot for Component's Host Element.
*/
Native,
/**
* Don't provide any template or style encapsulation.
*/
None
}
/**
* Interface for the {@link DirectiveMetadata} decorator function.
*
* See {@link DirectiveFactory}.
*/
interface DirectiveDecorator extends TypeDecorator {
}
/**
* 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<Type | any[]>,
pipes?: Array<Type | any[]>,
renderer?: string,
styles?: string[],
styleUrls?: string[],
}): ViewDecorator;
}
/**
* 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<Type | any[]>,
pipes?: Array<Type | any[]>,
renderer?: string,
styles?: string[],
styleUrls?: string[],
}): ViewDecorator;
}
/**
* {@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,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
queries?: {[key: string]: any}
}): DirectiveMetadata;
(obj: {
selector?: string,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
queries?: {[key: string]: any}
}): DirectiveDecorator;
}
/**
* {@link ComponentMetadata} 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,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
queries?: {[key: string]: any},
viewBindings?: any[],
changeDetection?: ChangeDetectionStrategy,
}): ComponentMetadata;
(obj: {
selector?: string,
inputs?: string[],
outputs?: string[],
properties?: string[],
events?: string[],
host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
queries?: {[key: string]: any},
viewBindings?: any[],
changeDetection?: ChangeDetectionStrategy,
}): ComponentDecorator;
}
/**
* {@link ViewMetadata} 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<Type | any[]>,
pipes?: Array<Type | any[]>,
encapsulation?: ViewEncapsulation,
styles?: string[],
styleUrls?: string[],
}): ViewMetadata;
(obj: {
templateUrl?: string,
template?: string,
directives?: Array<Type | any[]>,
pipes?: Array<Type | any[]>,
encapsulation?: ViewEncapsulation,
styles?: string[],
styleUrls?: string[],
}): ViewDecorator;
}
/**
* {@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 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<SomeType>) {
* ...
* }
* }
* ```
*
* ### 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;
}
interface ContentChildrenFactory {
new(selector: Type | string, {descendants}?: {descendants?: boolean}): ContentChildrenMetadata;
(selector: Type | string, {descendants}?: {descendants?: boolean}): any;
}
interface ContentChildFactory {
new(selector: Type | string): ContentChildFactory;
(selector: Type | string): any;
}
interface ViewChildrenFactory {
new(selector: Type | string): ViewChildrenMetadata;
(selector: Type | string): any;
}
interface ViewChildFactory {
new(selector: Type | string): ViewChildFactory;
(selector: Type | string): any;
}
/**
* {@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, pure?: boolean}): any;
(obj: {name: string, pure?: boolean}): any;
}
/**
* {@link InputMetadata} factory for creating decorators.
*
* See {@link InputMetadata}.
*/
interface InputFactory {
new(bindingPropertyName?: string): any;
(bindingPropertyName?: string): any;
}
/**
* {@link OutputMetadata} factory for creating decorators.
*
* See {@link OutputMetadata}.
*/
interface OutputFactory {
new(bindingPropertyName?: string): any;
(bindingPropertyName?: string): any;
}
/**
* {@link HostBindingMetadata} factory function.
*/
interface HostBindingFactory {
new(hostPropertyName?: string): any;
(hostPropertyName?: string): any;
}
/**
* {@link HostListenerMetadata} factory function.
*/
interface HostListenerFactory {
new(eventName: string, args?: string[]): any;
(eventName: string, args?: string[]): any;
}
/**
* {@link ComponentMetadata} factory function.
*/
var Component: ComponentFactory;
/**
* {@link DirectiveMetadata} factory function.
*/
var Directive: DirectiveFactory;
/**
* {@link ViewMetadata} factory function.
*/
var View: ViewFactory;
/**
* {@link AttributeMetadata} factory function.
*/
var Attribute: AttributeFactory;
/**
* {@link QueryMetadata} factory function.
*/
var Query: QueryFactory;
/**
* {@link ContentChildrenMetadata} factory function.
*/
var ContentChildren: ContentChildrenFactory;
/**
* {@link ContentChildMetadata} factory function.
*/
var ContentChild: ContentChildFactory;
/**
* {@link ViewChildrenMetadata} factory function.
*/
var ViewChildren: ViewChildrenFactory;
/**
* {@link ViewChildMetadata} factory function.
*/
var ViewChild: ViewChildFactory;
/**
* {@link di/ViewQueryMetadata} factory function.
*/
var ViewQuery: QueryFactory;
/**
* {@link PipeMetadata} factory function.
*/
var Pipe: PipeFactory;
/**
* {@link InputMetadata} factory function.
*
* See {@link InputMetadata}.
*/
var Input: InputFactory;
/**
* {@link OutputMetadata} factory function.
*
* See {@link OutputMetadatas}.
*/
var Output: OutputFactory;
/**
* {@link HostBindingMetadata} factory function.
*/
var HostBinding: HostBindingFactory;
/**
* {@link HostListenerMetadata} factory function.
*/
var HostListener: HostListenerFactory;
/**
* 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 = ng.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.
*/
<T extends Type>(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;
}
/**
* A parameter metadata that specifies a dependency.
*
* ### Example ([live demo](http://plnkr.co/edit/6uHYJK?p=preview))
*
* ```typescript
* class Engine {}
*
* @Injectable()
* class Car {
* engine;
* constructor(@Inject("MyEngine") engine:Engine) {
* this.engine = engine;
* }
* }
*
* var injector = Injector.resolveAndCreate([
* bind("MyEngine").toClass(Engine),
* Car
* ]);
*
* expect(injector.get(Car).engine instanceof Engine).toBe(true);
* ```
*
* When `@Inject()` is not present, {@link Injector} will use the type annotation of the parameter.
*
* ### Example
*
* ```typescript
* class Engine {}
*
* @Injectable()
* class Car {
* constructor(public engine: Engine) {} //same as constructor(@Inject(Engine) engine:Engine)
* }
*
* var injector = Injector.resolveAndCreate([Engine, Car]);
* expect(injector.get(Car).engine instanceof Engine).toBe(true);
* ```
*/
class InjectMetadata {
constructor(token: any);
token: any;
toString(): string;
}
/**
* A parameter metadata that marks a dependency as optional. {@link Injector} provides `null` if
* the dependency is not found.
*
* ### Example ([live demo](http://plnkr.co/edit/AsryOm?p=preview))
*
* ```typescript
* class Engine {}
*
* @Injectable()
* class Car {
* engine;
* constructor(@Optional() engine:Engine) {
* this.engine = engine;
* }
* }
*
* var injector = Injector.resolveAndCreate([Car]);
* expect(injector.get(Car).engine).toBeNull();
* ```
*/
class OptionalMetadata {
toString(): string;
}
/**
* A marker metadata that marks a class as available to {@link Injector} for creation.
*
* ### Example ([live demo](http://plnkr.co/edit/Wk4DMQ?p=preview))
*
* ```typescript
* @Injectable()
* class UsefulService {}
*
* @Injectable()
* class NeedsService {
* constructor(public service:UsefulService) {}
* }
*
* var injector = Injector.resolveAndCreate([NeedsService, UsefulService]);
* expect(injector.get(NeedsService).service instanceof UsefulService).toBe(true);
* ```
* {@link Injector} will throw {@link NoAnnotationError} when trying to instantiate a class that
* does not have `@Injectable` marker, as shown in the example below.
*
* ```typescript
* class UsefulService {}
*
* class NeedsService {
* constructor(public service:UsefulService) {}
* }
*
* var injector = Injector.resolveAndCreate([NeedsService, UsefulService]);
* expect(() => injector.get(NeedsService)).toThrowError();
* ```
*/
class InjectableMetadata {
constructor();
}
/**
* Specifies that an {@link Injector} should retrieve a dependency only from itself.
*
* ### Example ([live demo](http://plnkr.co/edit/NeagAg?p=preview))
*
* ```typescript
* class Dependency {
* }
*
* @Injectable()
* class NeedsDependency {
* dependency;
*
* dependency;
* constructor(@Self() dependency:Dependency) {
* this.dependency = dependency;
* }
* }
*
* var inj = Injector.resolveAndCreate([Dependency, NeedsDependency]);
* var nd = inj.get(NeedsDependency);
*
* expect(nd.dependency instanceof Dependency).toBe(true);
*
* var inj = Injector.resolveAndCreate([Dependency]);
* var child = inj.resolveAndCreateChild([NeedsDependency]);
* expect(() => child.get(NeedsDependency)).toThrowError();
* ```
*/
class SelfMetadata {
toString(): string;
}
/**
* Specifies that an injector should retrieve a dependency from any injector until reaching the
* closest host.
*
* In Angular, a component element is automatically declared as a host for all the injectors in
* its view.
*
* ### Example ([live demo](http://plnkr.co/edit/GX79pV?p=preview))
*
* In the following example `App` contains `ParentCmp`, which contains `ChildDirective`.
* So `ParentCmp` is the host of `ChildDirective`.
*
* `ChildDirective` depends on two services: `HostService` and `OtherService`.
* `HostService` is defined at `ParentCmp`, and `OtherService` is defined at `App`.
*
* ```typescript
* class OtherService {}
* class HostService {}
*
* @Directive({
* selector: 'child-directive'
* })
* class ChildDirective {
* constructor(@Optional() @Host() os:OtherService, @Optional() @Host() hs:HostService){
* console.log("os is null", os);
* console.log("hs is NOT null", hs);
* }
* }
*
* @Component({
* selector: 'parent-cmp',
* bindings: [HostService]
* })
* @View({
* template: `
* Dir: <child-directive></child-directive>
* `,
* directives: [ChildDirective]
* })
* class ParentCmp {
* }
*
* @Component({
* selector: 'app',
* bindings: [OtherService]
* })
* @View({
* template: `
* Parent: <parent-cmp></parent-cmp>
* `,
* directives: [ParentCmp]
* })
* class App {
* }
*
* bootstrap(App);
* ```
*/
class HostMetadata {
toString(): string;
}
/**
* Specifies that the dependency resolution should start from the parent injector.
*
* ### Example ([live demo](http://plnkr.co/edit/Wchdzb?p=preview))
*
* ```typescript
* class Dependency {
* }
*
* @Injectable()
* class NeedsDependency {
* dependency;
* constructor(@SkipSelf() dependency:Dependency) {
* this.dependency = dependency;
* }
* }
*
* var parent = Injector.resolveAndCreate([Dependency]);
* var child = parent.resolveAndCreateChild([NeedsDependency]);
* expect(child.get(NeedsDependency).dependency instanceof Depedency).toBe(true);
*
* var inj = Injector.resolveAndCreate([Dependency, NeedsDependency]);
* expect(() => inj.get(NeedsDependency)).toThrowError();
* ```
*/
class SkipSelfMetadata {
toString(): string;
}
/**
* `DependencyMetadata` is used by the framework to extend DI.
* This is internal to Angular and should not be used directly.
*/
class DependencyMetadata {
token: any;
}
/**
* Allows to refer to references which are not yet defined.
*
* For instance, `forwardRef` is used when the `token` which we need to refer to for the purposes of
* DI is declared,
* but not yet defined. It is also used when the `token` which we use when creating a query is not
* yet defined.
*
* ### Example ([live demo](http://plnkr.co/edit/bRs0SX2OTQiJzqvjgl8P?p=preview))
*
* ```typescript
* class Door {
* lock: Lock;
* constructor(@Inject(forwardRef(() => Lock)) lock:Lock) {
* this.lock = lock;
* }
* }
*
* // Only at this point Lock is defined.
* class Lock {
* }
*
* var injector = Injector.resolveAndCreate([Door, Lock]);
* var door = injector.get(Door);
* expect(door instanceof Door).toBe(true);
* expect(door.lock instanceof Lock).toBe(true);
* ```
*/
function forwardRef(forwardRefFn: ForwardRefFn): Type;
/**
* Lazily retrieves the reference value from a forwardRef.
*
* Acts as the identity function when given a non-forward-ref value.
*
* ### Example ([live demo](http://plnkr.co/edit/GU72mJrk1fiodChcmiDR?p=preview))
*
* ```typescript
* var ref = forwardRef(() => "refValue");
* expect(resolveForwardRef(ref)).toEqual("refValue");
* expect(resolveForwardRef("regularValue")).toEqual("regularValue");
* ```
*
* See: {@link forwardRef}
*/
function resolveForwardRef(type: any): any;
/**
* An interface that a function passed into {@link forwardRef} has to implement.
*
* ### Example
*
* ```typescript
* var fn:ForwardRefFn = forwardRef(() => Lock);
* ```
*/
interface ForwardRefFn {
(): any;
}
/**
* A dependency injection container used for instantiating objects and resolving dependencies.
*
* An `Injector` is a replacement for a `new` operator, which can automatically resolve the
* constructor dependencies.
*
* In typical use, application code asks for the dependencies in the constructor and they are
* resolved by the `Injector`.
*
* ### Example ([live demo](http://plnkr.co/edit/jzjec0?p=preview))
*
* The following example creates an `Injector` configured to create `Engine` and `Car`.
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var injector = Injector.resolveAndCreate([Car, Engine]);
* var car = injector.get(Car);
* expect(car instanceof Car).toBe(true);
* expect(car.engine instanceof Engine).toBe(true);
* ```
*
* Notice, we don't use the `new` operator because we explicitly want to have the `Injector`
* resolve all of the object's dependencies automatically.
*/
class Injector {
/**
* Private
*/
constructor(_proto: any, _parent?: Injector, _depProvider?: any, _debugContext?: Function);
/**
* Turns an array of binding definitions into an array of resolved bindings.
*
* A resolution is a process of flattening multiple nested arrays and converting individual
* bindings into an array of {@link ResolvedBinding}s.
*
* ### Example ([live demo](http://plnkr.co/edit/AiXTHi?p=preview))
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var bindings = Injector.resolve([Car, [[Engine]]]);
*
* expect(bindings.length).toEqual(2);
*
* expect(bindings[0] instanceof ResolvedBinding).toBe(true);
* expect(bindings[0].key.displayName).toBe("Car");
* expect(bindings[0].dependencies.length).toEqual(1);
* expect(bindings[0].factory).toBeDefined();
*
* expect(bindings[1].key.displayName).toBe("Engine");
* });
* ```
*
* See {@link fromResolvedBindings} for more info.
*/
static resolve(bindings: Array<Type | Binding | any[]>): ResolvedBinding[];
/**
* Resolves an array of bindings and creates an injector from those bindings.
*
* The passed-in bindings can be an array of `Type`, {@link Binding},
* or a recursive array of more bindings.
*
* ### Example ([live demo](http://plnkr.co/edit/ePOccA?p=preview))
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var injector = Injector.resolveAndCreate([Car, Engine]);
* expect(injector.get(Car) instanceof Car).toBe(true);
* ```
*
* This function is slower than the corresponding `fromResolvedBindings`
* because it needs to resolve the passed-in bindings first.
* See {@link resolve} and {@link fromResolvedBindings}.
*/
static resolveAndCreate(bindings: Array<Type | Binding | any[]>): Injector;
/**
* Creates an injector from previously resolved bindings.
*
* This API is the recommended way to construct injectors in performance-sensitive parts.
*
* ### Example ([live demo](http://plnkr.co/edit/KrSMci?p=preview))
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var bindings = Injector.resolve([Car, Engine]);
* var injector = Injector.fromResolvedBindings(bindings);
* expect(injector.get(Car) instanceof Car).toBe(true);
* ```
*/
static fromResolvedBindings(bindings: ResolvedBinding[]): Injector;
/**
* Retrieves an instance from the injector based on the provided token.
* Throws {@link NoBindingError} if not found.
*
* ### Example ([live demo](http://plnkr.co/edit/HeXSHg?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind("validToken").toValue("Value")
* ]);
* expect(injector.get("validToken")).toEqual("Value");
* expect(() => injector.get("invalidToken")).toThrowError();
* ```
*
* `Injector` returns itself when given `Injector` as a token.
*
* ```typescript
* var injector = Injector.resolveAndCreate([]);
* expect(injector.get(Injector)).toBe(injector);
* ```
*/
get(token: any): any;
/**
* Retrieves an instance from the injector based on the provided token.
* Returns null if not found.
*
* ### Example ([live demo](http://plnkr.co/edit/tpEbEy?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind("validToken").toValue("Value")
* ]);
* expect(injector.getOptional("validToken")).toEqual("Value");
* expect(injector.getOptional("invalidToken")).toBe(null);
* ```
*
* `Injector` returns itself when given `Injector` as a token.
*
* ```typescript
* var injector = Injector.resolveAndCreate([]);
* expect(injector.getOptional(Injector)).toBe(injector);
* ```
*/
getOptional(token: any): any;
/**
* Parent of this injector.
*
* <!-- TODO: Add a link to the section of the user guide talking about hierarchical injection.
* -->
*
* ### Example ([live demo](http://plnkr.co/edit/eosMGo?p=preview))
*
* ```typescript
* var parent = Injector.resolveAndCreate([]);
* var child = parent.resolveAndCreateChild([]);
* expect(child.parent).toBe(parent);
* ```
*/
parent: Injector;
/**
* Resolves an array of bindings and creates a child injector from those bindings.
*
* <!-- TODO: Add a link to the section of the user guide talking about hierarchical injection.
* -->
*
* The passed-in bindings can be an array of `Type`, {@link Binding},
* or a recursive array of more bindings.
*
* ### Example ([live demo](http://plnkr.co/edit/opB3T4?p=preview))
*
* ```typescript
* class ParentBinding {}
* class ChildBinding {}
*
* var parent = Injector.resolveAndCreate([ParentBinding]);
* var child = parent.resolveAndCreateChild([ChildBinding]);
*
* expect(child.get(ParentBinding) instanceof ParentBinding).toBe(true);
* expect(child.get(ChildBinding) instanceof ChildBinding).toBe(true);
* expect(child.get(ParentBinding)).toBe(parent.get(ParentBinding));
* ```
*
* This function is slower than the corresponding `createChildFromResolved`
* because it needs to resolve the passed-in bindings first.
* See {@link resolve} and {@link createChildFromResolved}.
*/
resolveAndCreateChild(bindings: Array<Type | Binding | any[]>): Injector;
/**
* Creates a child injector from previously resolved bindings.
*
* <!-- TODO: Add a link to the section of the user guide talking about hierarchical injection.
* -->
*
* This API is the recommended way to construct injectors in performance-sensitive parts.
*
* ### Example ([live demo](http://plnkr.co/edit/VhyfjN?p=preview))
*
* ```typescript
* class ParentBinding {}
* class ChildBinding {}
*
* var parentBindings = Injector.resolve([ParentBinding]);
* var childBindings = Injector.resolve([ChildBinding]);
*
* var parent = Injector.fromResolvedBindings(parentBindings);
* var child = parent.createChildFromResolved(childBindings);
*
* expect(child.get(ParentBinding) instanceof ParentBinding).toBe(true);
* expect(child.get(ChildBinding) instanceof ChildBinding).toBe(true);
* expect(child.get(ParentBinding)).toBe(parent.get(ParentBinding));
* ```
*/
createChildFromResolved(bindings: ResolvedBinding[]): Injector;
/**
* Resolves a binding and instantiates an object in the context of the injector.
*
* The created object does not get cached by the injector.
*
* ### Example ([live demo](http://plnkr.co/edit/yvVXoB?p=preview))
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var injector = Injector.resolveAndCreate([Engine]);
*
* var car = injector.resolveAndInstantiate(Car);
* expect(car.engine).toBe(injector.get(Engine));
* expect(car).not.toBe(injector.resolveAndInstantiate(Car));
* ```
*/
resolveAndInstantiate(binding: Type | Binding): any;
/**
* Instantiates an object using a resolved binding in the context of the injector.
*
* The created object does not get cached by the injector.
*
* ### Example ([live demo](http://plnkr.co/edit/ptCImQ?p=preview))
*
* ```typescript
* @Injectable()
* class Engine {
* }
*
* @Injectable()
* class Car {
* constructor(public engine:Engine) {}
* }
*
* var injector = Injector.resolveAndCreate([Engine]);
* var carBinding = Injector.resolve([Car])[0];
* var car = injector.instantiateResolved(carBinding);
* expect(car.engine).toBe(injector.get(Engine));
* expect(car).not.toBe(injector.instantiateResolved(carBinding));
* ```
*/
instantiateResolved(binding: ResolvedBinding): any;
displayName: string;
toString(): string;
}
/**
* Describes how the {@link Injector} should instantiate a given token.
*
* See {@link bind}.
*
* ### Example ([live demo](http://plnkr.co/edit/GNAyj6K6PfYg2NBzgwZ5?p%3Dpreview&p=preview))
*
* ```javascript
* var injector = Injector.resolveAndCreate([
* new Binding("message", { toValue: 'Hello' })
* ]);
*
* expect(injector.get("message")).toEqual('Hello');
* ```
*/
class Binding {
constructor(token: any, {toClass, toValue, toAlias, toFactory, deps, multi}: {
toClass?: Type,
toValue?: any,
toAlias?: any,
toFactory?: Function,
deps?: Object[],
multi?: boolean
});
/**
* Token used when retrieving this binding. Usually, it is a type {@link `Type`}.
*/
token: any;
/**
* Binds a DI token to an implementation class.
*
* ### Example ([live demo](http://plnkr.co/edit/RSTG86qgmoxCyj9SWPwY?p=preview))
*
* Because `toAlias` and `toClass` are often confused, the example contains both use cases for
* easy
* comparison.
*
* ```typescript
* class Vehicle {}
*
* class Car extends Vehicle {}
*
* var injectorClass = Injector.resolveAndCreate([
* Car,
* new Binding(Vehicle, { toClass: Car })
* ]);
* var injectorAlias = Injector.resolveAndCreate([
* Car,
* new Binding(Vehicle, { toAlias: Car })
* ]);
*
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
*
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
* ```
*/
toClass: Type;
/**
* Binds a DI token to a value.
*
* ### Example ([live demo](http://plnkr.co/edit/UFVsMVQIDe7l4waWziES?p=preview))
*
* ```javascript
* var injector = Injector.resolveAndCreate([
* new Binding("message", { toValue: 'Hello' })
* ]);
*
* expect(injector.get("message")).toEqual('Hello');
* ```
*/
toValue: any;
/**
* Binds a DI token as an alias for an existing token.
*
* An alias means that {@link Injector} returns the same instance as if the alias token was used.
* This is in contrast to `toClass` where a separate instance of `toClass` is returned.
*
* ### Example ([live demo](http://plnkr.co/edit/QsatsOJJ6P8T2fMe9gr8?p=preview))
*
* Because `toAlias` and `toClass` are often confused the example contains both use cases for easy
* comparison.
*
* ```typescript
* class Vehicle {}
*
* class Car extends Vehicle {}
*
* var injectorAlias = Injector.resolveAndCreate([
* Car,
* new Binding(Vehicle, { toAlias: Car })
* ]);
* var injectorClass = Injector.resolveAndCreate([
* Car,
* new Binding(Vehicle, { toClass: Car })
* ]);
*
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
*
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
* ```
*/
toAlias: any;
/**
* Binds a DI token to a function which computes the value.
*
* ### Example ([live demo](http://plnkr.co/edit/Scoxy0pJNqKGAPZY1VVC?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* new Binding(Number, { toFactory: () => { return 1+2; }}),
* new Binding(String, { toFactory: (value) => { return "Value: " + value; },
* deps: [Number] })
* ]);
*
* expect(injector.get(Number)).toEqual(3);
* expect(injector.get(String)).toEqual('Value: 3');
* ```
*
* Used in conjuction with dependencies.
*/
toFactory: Function;
/**
* Specifies a set of dependencies
* (as `token`s) which should be injected into the factory function.
*
* ### Example ([live demo](http://plnkr.co/edit/Scoxy0pJNqKGAPZY1VVC?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* new Binding(Number, { toFactory: () => { return 1+2; }}),
* new Binding(String, { toFactory: (value) => { return "Value: " + value; },
* deps: [Number] })
* ]);
*
* expect(injector.get(Number)).toEqual(3);
* expect(injector.get(String)).toEqual('Value: 3');
* ```
*
* Used in conjunction with `toFactory`.
*/
dependencies: Object[];
/**
* Creates multiple bindings matching the same token (a multi-binding).
*
* Multi-bindings are used for creating pluggable service, where the system comes
* with some default bindings, and the user can register additonal bindings.
* The combination of the default bindings and the additional bindings will be
* used to drive the behavior of the system.
*
* ### Example
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* new Binding("Strings", { toValue: "String1", multi: true}),
* new Binding("Strings", { toValue: "String2", multi: true})
* ]);
*
* expect(injector.get("Strings")).toEqual(["String1", "String2"]);
* ```
*
* Multi-bindings and regular bindings cannot be mixed. The following
* will throw an exception:
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* new Binding("Strings", { toValue: "String1", multi: true }),
* new Binding("Strings", { toValue: "String2"})
* ]);
* ```
*/
multi: boolean;
}
/**
* Helper class for the {@link bind} function.
*/
class BindingBuilder {
constructor(token: any);
token: any;
/**
* Binds a DI token to a class.
*
* ### Example ([live demo](http://plnkr.co/edit/ZpBCSYqv6e2ud5KXLdxQ?p=preview))
*
* Because `toAlias` and `toClass` are often confused, the example contains both use cases for
* easy comparison.
*
* ```typescript
* class Vehicle {}
*
* class Car extends Vehicle {}
*
* var injectorClass = Injector.resolveAndCreate([
* Car,
* bind(Vehicle).toClass(Car)
* ]);
* var injectorAlias = Injector.resolveAndCreate([
* Car,
* bind(Vehicle).toAlias(Car)
* ]);
*
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
*
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
* ```
*/
toClass(type: Type): Binding;
/**
* Binds a DI token to a value.
*
* ### Example ([live demo](http://plnkr.co/edit/G024PFHmDL0cJFgfZK8O?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind('message').toValue('Hello')
* ]);
*
* expect(injector.get('message')).toEqual('Hello');
* ```
*/
toValue(value: any): Binding;
/**
* Binds a DI token as an alias for an existing token.
*
* An alias means that we will return the same instance as if the alias token was used. (This is
* in contrast to `toClass` where a separate instance of `toClass` will be returned.)
*
* ### Example ([live demo](http://plnkr.co/edit/uBaoF2pN5cfc5AfZapNw?p=preview))
*
* Because `toAlias` and `toClass` are often confused, the example contains both use cases for
* easy
* comparison.
*
* ```typescript
* class Vehicle {}
*
* class Car extends Vehicle {}
*
* var injectorAlias = Injector.resolveAndCreate([
* Car,
* bind(Vehicle).toAlias(Car)
* ]);
* var injectorClass = Injector.resolveAndCreate([
* Car,
* bind(Vehicle).toClass(Car)
* ]);
*
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car));
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true);
*
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car));
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true);
* ```
*/
toAlias(aliasToken: /*Type*/ any): Binding;
/**
* Binds a DI token to a function which computes the value.
*
* ### Example ([live demo](http://plnkr.co/edit/OejNIfTT3zb1iBxaIYOb?p=preview))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind(Number).toFactory(() => { return 1+2; }),
* bind(String).toFactory((v) => { return "Value: " + v; }, [Number])
* ]);
*
* expect(injector.get(Number)).toEqual(3);
* expect(injector.get(String)).toEqual('Value: 3');
* ```
*/
toFactory(factory: Function, dependencies?: any[]): Binding;
}
/**
* An internal resolved representation of a {@link Binding} used by the {@link Injector}.
*
* It is usually created automatically by `Injector.resolveAndCreate`.
*
* It can be created manually, as follows:
*
* ### Example ([live demo](http://plnkr.co/edit/RfEnhh8kUEI0G3qsnIeT?p%3Dpreview&p=preview))
*
* ```typescript
* var resolvedBindings = Injector.resolve([new Binding('message', {toValue: 'Hello'})]);
* var injector = Injector.fromResolvedBindings(resolvedBindings);
*
* expect(injector.get('message')).toEqual('Hello');
* ```
*/
interface ResolvedBinding {
/**
* A key, usually a `Type`.
*/
key: Key;
}
/**
* @private
* An internal resolved representation of a factory function created by resolving {@link Binding}.
*/
class ResolvedFactory {
constructor(factory: Function, dependencies: Dependency[]);
/**
* Factory function which can return an instance of an object represented by a key.
*/
factory: Function;
/**
* Arguments (dependencies) to the `factory` function.
*/
dependencies: Dependency[];
}
/**
* @private
*/
class Dependency {
constructor(key: Key, optional: boolean, lowerBoundVisibility: any, upperBoundVisibility: any, properties: any[]);
static fromKey(key: Key): Dependency;
key: Key;
optional: boolean;
lowerBoundVisibility: any;
upperBoundVisibility: any;
properties: any[];
}
/**
* Creates a {@link Binding}.
*
* To construct a {@link Binding}, bind a `token` to either a class, a value, a factory function, or
* to an alias to another `token`.
* See {@link BindingBuilder} for more details.
*
* The `token` is most commonly a class or {@link angular2/di/OpaqueToken}.
*/
function bind(token: any): BindingBuilder;
/**
* A unique object used for retrieving items from the {@link Injector}.
*
* Keys have:
* - a system-wide unique `id`.
* - a `token`.
*
* `Key` is used internally by {@link Injector} because its system-wide unique `id` allows the
* injector to store created objects in a more efficient way.
*
* `Key` should not be created directly. {@link Injector} creates keys automatically when resolving
* bindings.
*/
class Key {
/**
* Private
*/
constructor(token: Object, id: number);
/**
* Retrieves a `Key` for a token.
*/
static get(token: Object): Key;
/**
* @returns the number of keys registered in the system.
*/
static numberOfKeys: number;
token: Object;
id: number;
/**
* Returns a stringified token.
*/
displayName: string;
}
/**
* @private
* Type literals is a Dart-only feature. This is here only so we can x-compile
* to multiple languages.
*/
class TypeLiteral {
type: any;
}
/**
* Thrown when trying to retrieve a dependency by `Key` from {@link Injector}, but the
* {@link Injector} does not have a {@link Binding} for {@link Key}.
*
* ### Example ([live demo](http://plnkr.co/edit/vq8D3FRB9aGbnWJqtEPE?p=preview))
*
* ```typescript
* class A {
* constructor(b:B) {}
* }
*
* expect(() => Injector.resolveAndCreate([A])).toThrowError();
* ```
*/
class NoBindingError extends AbstractBindingError {
constructor(injector: Injector, key: Key);
}
/**
* Base class for all errors arising from misconfigured bindings.
*/
class AbstractBindingError extends BaseException {
constructor(injector: Injector, key: Key, constructResolvingMessage: Function);
addKey(injector: Injector, key: Key): void;
context: any;
}
/**
* Thrown when dependencies form a cycle.
*
* ### Example ([live demo](http://plnkr.co/edit/wYQdNos0Tzql3ei1EV9j?p=info))
*
* ```typescript
* var injector = Injector.resolveAndCreate([
* bind("one").toFactory((two) => "two", [[new Inject("two")]]),
* bind("two").toFactory((one) => "one", [[new Inject("one")]])
* ]);
*
* expect(() => injector.get("one")).toThrowError();
* ```
*
* Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed.
*/
class CyclicDependencyError extends AbstractBindingError {
constructor(injector: Injector, key: Key);
}
/**
* Thrown when a constructing type returns with an Error.
*
* The `InstantiationError` class contains the original error plus the dependency graph which caused
* this object to be instantiated.
*
* ### Example ([live demo](http://plnkr.co/edit/7aWYdcqTQsP0eNqEdUAf?p=preview))
*
* ```typescript
* class A {
* constructor() {
* throw new Error('message');
* }
* }
*
* var injector = Injector.resolveAndCreate([A]);
*
* try {
* injector.get(A);
* } catch (e) {
* expect(e instanceof InstantiationError).toBe(true);
* expect(e.originalException.message).toEqual("message");
* expect(e.originalStack).toBeDefined();
* }
* ```
*/
interface InstantiationError extends WrappedException {
addKey(injector: Injector, key: Key): void;
wrapperMessage: string;
causeKey: Key;
context: any;
}
/**
* Thrown when an object other then {@link Binding} (or `Type`) is passed to {@link Injector}
* creation.
*
* ### Example ([live demo](http://plnkr.co/edit/YatCFbPAMCL0JSSQ4mvH?p=preview))
*
* ```typescript
* expect(() => Injector.resolveAndCreate(["not a type"])).toThrowError();
* ```
*/
class InvalidBindingError extends BaseException {
constructor(binding: any);
}
/**
* Thrown when the class has no annotation information.
*
* Lack of annotation information prevents the {@link Injector} from determining which dependencies
* need to be injected into the constructor.
*
* ### Example ([live demo](http://plnkr.co/edit/rHnZtlNS7vJOPQ6pcVkm?p=preview))
*
* ```typescript
* class A {
* constructor(b) {}
* }
*
* expect(() => Injector.resolveAndCreate([A])).toThrowError();
* ```
*
* This error is also thrown when the class not marked with {@link @Injectable} has parameter types.
*
* ```typescript
* class B {}
*
* class A {
* constructor(b:B) {} // no information about the parameter types of A is available at runtime.
* }
*
* expect(() => Injector.resolveAndCreate([A,B])).toThrowError();
* ```
*/
class NoAnnotationError extends BaseException {
constructor(typeOrFunc: any, params: any[][]);
}
/**
* Thrown when getting an object by index.
*
* ### Example ([live demo](http://plnkr.co/edit/bRs0SX2OTQiJzqvjgl8P?p=preview))
*
* ```typescript
* class A {}
*
* var injector = Injector.resolveAndCreate([A]);
*
* expect(() => injector.getAt(100)).toThrowError();
* ```
*/
class OutOfBoundsError extends BaseException {
constructor(index: any);
}
/**
* Creates a token that can be used in a DI Binding.
*
* ### Example ([live demo](http://plnkr.co/edit/Ys9ezXpj2Mnoy3Uc8KBp?p=preview))
*
* ```typescript
* var t = new OpaqueToken("binding");
*
* var injector = Injector.resolveAndCreate([
* bind(t).toValue("bindingValue")
* ]);
*
* expect(injector.get(t)).toEqual("bindingValue");
* ```
*
* Using an `OpaqueToken` is preferable to using strings as tokens because of possible collisions
* caused by multiple bindings using the same string as two different tokens.
*
* Using an `OpaqueToken` is preferable to using an `Object` as tokens because it provides better
* error messages.
*/
class OpaqueToken {
constructor(_desc: string);
toString(): string;
}
/**
* Factory for creating {@link InjectMetadata}.
*/
interface InjectFactory {
new(token: any): InjectMetadata;
(token: any): any;
}
/**
* Factory for creating {@link OptionalMetadata}.
*/
interface OptionalFactory {
new(): OptionalMetadata;
(): any;
}
/**
* Factory for creating {@link InjectableMetadata}.
*/
interface InjectableFactory {
new(): InjectableMetadata;
(): any;
}
/**
* Factory for creating {@link SelfMetadata}.
*/
interface SelfFactory {
new(): SelfMetadata;
(): any;
}
/**
* Factory for creating {@link HostMetadata}.
*/
interface HostFactory {
new(): HostMetadata;
(): any;
}
/**
* Factory for creating {@link SkipSelfMetadata}.
*/
interface SkipSelfFactory {
new(): SkipSelfMetadata;
(): any;
}
/**
* Factory for creating {@link InjectMetadata}.
*/
var Inject: InjectFactory;
/**
* Factory for creating {@link OptionalMetadata}.
*/
var Optional: OptionalFactory;
/**
* Factory for creating {@link InjectableMetadata}.
*/
var Injectable: InjectableFactory;
/**
* Factory for creating {@link SelfMetadata}.
*/
var Self: SelfFactory;
/**
* Factory for creating {@link HostMetadata}.
*/
var Host: HostFactory;
/**
* Factory for creating {@link SkipSelfMetadata}.
*/
var SkipSelf: SkipSelfFactory;
/**
* The `async` pipe subscribes to an Observable or Promise and returns the latest value it has
* emitted.
* When a new value is emitted, the `async` pipe marks the component to be checked for changes.
*
* # Example
* The example below binds the `time` Observable to the view. Every 500ms, the `time` Observable
* updates the view with the current time.
*
* ```
* import {Observable} from 'angular2/core';
* @Component({
* selector: "task-cmp"
* })
* @View({
* template: "Time: {{ time | async }}"
* })
* class Task {
* time = new Observable<number>(observer => {
* setInterval(_ =>
* observer.next(new Date().getTime()), 500);
* });
* }
* ```
*/
class AsyncPipe implements PipeTransform, PipeOnDestroy {
constructor(_ref: ChangeDetectorRef);
onDestroy(): void;
transform(obj: Observable | Promise<any>, args?: any[]): any;
}
/**
* WARNING: this pipe uses the Internationalization API.
* Therefore it is only reliable in Chrome and Opera browsers.
*
* Formats a date value to a string based on the requested format.
*
* # Usage
*
* expression | date[:format]
*
* where `expression` is a date object or a number (milliseconds since UTC epoch) and
* `format` indicates which date/time components to include:
*
* | Component | Symbol | Short Form | Long Form | Numeric | 2-digit |
* |-----------|:------:|--------------|-------------------|-----------|-----------|
* | era | G | G (AD) | GGGG (Anno Domini)| - | - |
* | year | y | - | - | y (2015) | yy (15) |
* | month | M | MMM (Sep) | MMMM (September) | M (9) | MM (09) |
* | day | d | - | - | d (3) | dd (03) |
* | weekday | E | EEE (Sun) | EEEE (Sunday) | - | - |
* | hour | j | - | - | j (13) | jj (13) |
* | hour12 | h | - | - | h (1 PM) | hh (01 PM)|
* | hour24 | H | - | - | H (13) | HH (13) |
* | minute | m | - | - | m (5) | mm (05) |
* | second | s | - | - | s (9) | ss (09) |
* | timezone | z | - | z (Pacific Standard Time)| - | - |
* | timezone | Z | Z (GMT-8:00) | - | - | - |
*
* In javascript, only the components specified will be respected (not the ordering,
* punctuations, ...) and details of the formatting will be dependent on the locale.
* On the other hand in Dart version, you can also include quoted text as well as some extra
* date/time components such as quarter. For more information see:
* https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/intl/intl.DateFormat.
*
* `format` can also be one of the following predefined formats:
*
* - `'medium'`: equivalent to `'yMMMdjms'` (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
* - `'short'`: equivalent to `'yMdjm'` (e.g. 9/3/2010, 12:05 PM for en-US)
* - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. Friday, September 3, 2010 for en-US)
* - `'longDate'`: equivalent to `'yMMMMd'` (e.g. September 3, 2010)
* - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. Sep 3, 2010 for en-US)
* - `'shortDate'`: equivalent to `'yMd'` (e.g. 9/3/2010 for en-US)
* - `'mediumTime'`: equivalent to `'jms'` (e.g. 12:05:08 PM for en-US)
* - `'shortTime'`: equivalent to `'jm'` (e.g. 12:05 PM for en-US)
*
* Timezone of the formatted text will be the local system timezone of the end-users machine.
*
* # Examples
*
* Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11)
* in the _local_ time and locale is 'en-US':
*
* {{ dateObj | date }} // output is 'Jun 15, 2015'
* {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'
* {{ dateObj | date:'shortTime' }} // output is '9:43 PM'
* {{ dateObj | date:'mmss' }} // output is '43:11'
*/
class DatePipe implements PipeTransform {
transform(value: any, args: any[]): string;
supports(obj: any): boolean;
}
let DEFAULT_PIPES: Binding;
let DEFAULT_PIPES_TOKEN: OpaqueToken;
/**
* Implements json transforms to any object.
*
* # Example
*
* In this example we transform the user object to json.
*
* ```
* @Component({
* selector: "user-cmp"
* })
* @View({
* template: "User: {{ user | json }}"
* })
* class Username {
* user:Object
* constructor() {
* this.user = { name: "PatrickJS" };
* }
* }
*
* ```
*/
class JsonPipe implements PipeTransform {
transform(value: any, args?: any[]): string;
}
/**
* Creates a new List or String containing only a subset (slice) of the
* elements.
*
* The starting index of the subset to return is specified by the `start` parameter.
*
* The ending index of the subset to return is specified by the optional `end` parameter.
*
* # Usage
*
* expression | slice:start[:end]
*
* All behavior is based on the expected behavior of the JavaScript API
* Array.prototype.slice() and String.prototype.slice()
*
* Where the input expression is a [List] or [String], and `start` is:
*
* - **a positive integer**: return the item at _start_ index and all items after
* in the list or string expression.
* - **a negative integer**: return the item at _start_ index from the end and all items after
* in the list or string expression.
* - **`|start|` greater than the size of the expression**: return an empty list or string.
* - **`|start|` negative greater than the size of the expression**: return entire list or
* string expression.
*
* and where `end` is:
*
* - **omitted**: return all items until the end of the input
* - **a positive integer**: return all items before _end_ index of the list or string
* expression.
* - **a negative integer**: return all items before _end_ index from the end of the list
* or string expression.
*
* When operating on a [List], the returned list is always a copy even when all
* the elements are being returned.
*
* # Examples
*
* ## List Example
*
* Assuming `var collection = ['a', 'b', 'c', 'd']`, this `ng-for` directive:
*
* <li *ng-for="var i in collection | slice:1:3">{{i}}</li>
*
* produces the following:
*
* <li>b</li>
* <li>c</li>
*
* ## String Examples
*
* {{ 'abcdefghij' | slice:0:4 }} // output is 'abcd'
* {{ 'abcdefghij' | slice:4:0 }} // output is ''
* {{ 'abcdefghij' | slice:-4 }} // output is 'ghij'
* {{ 'abcdefghij' | slice:-4,-2 }} // output is 'gh'
* {{ 'abcdefghij' | slice: -100 }} // output is 'abcdefghij'
* {{ 'abcdefghij' | slice: 100 }} // output is ''
*/
class SlicePipe implements PipeTransform {
transform(value: any, args?: any[]): any;
supports(obj: any): boolean;
}
/**
* Implements lowercase transforms to text.
*
* # Example
*
* In this example we transform the user text lowercase.
*
* ```
* @Component({
* selector: "username-cmp"
* })
* @View({
* template: "Username: {{ user | lowercase }}"
* })
* class Username {
* user:string;
* }
*
* ```
*/
class LowerCasePipe implements PipeTransform {
transform(value: string, args?: any[]): string;
}
class NumberPipe {
}
/**
* WARNING: this pipe uses the Internationalization API.
* Therefore it is only reliable in Chrome and Opera browsers.
*
* Formats a number as local text. i.e. group sizing and separator and other locale-specific
* configurations are based on the active locale.
*
* # Usage
*
* expression | number[:digitInfo]
*
* where `expression` is a number and `digitInfo` has the following format:
*
* {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
*
* - minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.
* - minFractionDigits is the minimum number of digits after fraction. Defaults to 0.
* - maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.
*
* For more information on the acceptable range for each of these numbers and other
* details see your native internationalization library.
*
* # Examples
*
* {{ 123 | number }} // output is 123
* {{ 123.1 | number: '.2-3' }} // output is 123.10
* {{ 1 | number: '2.2' }} // output is 01.00
*/
class DecimalPipe extends NumberPipe implements PipeTransform {
transform(value: any, args: any[]): string;
}
/**
* WARNING: this pipe uses the Internationalization API.
* Therefore it is only reliable in Chrome and Opera browsers.
*
* Formats a number as local percent.
*
* # Usage
*
* expression | percent[:digitInfo]
*
* For more information about `digitInfo` see {@link DecimalPipe}
*/
class PercentPipe extends NumberPipe implements PipeTransform {
transform(value: any, args: any[]): string;
}
/**
* WARNING: this pipe uses the Internationalization API.
* Therefore it is only reliable in Chrome and Opera browsers.
*
* Formats a number as local currency.
*
* # Usage
*
* expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
*
* where `currencyCode` is the ISO 4217 currency code, such as "USD" for the US dollar and
* "EUR" for the euro. `symbolDisplay` is a boolean indicating whether to use the currency
* symbol (e.g. $) or the currency code (e.g. USD) in the output. The default for this value
* is `false`.
* For more information about `digitInfo` see {@link DecimalPipe}
*/
class CurrencyPipe extends NumberPipe implements PipeTransform {
transform(value: any, args: any[]): string;
}
/**
* Implements uppercase transforms to text.
*
* # Example
*
* In this example we transform the user text uppercase.
*
* ```
* @Component({
* selector: "username-cmp"
* })
* @View({
* template: "Username: {{ user | uppercase }}"
* })
* class Username {
* user:string;
* }
*
* ```
*/
class UpperCasePipe implements PipeTransform {
transform(value: string, args?: any[]): string;
}
/**
*
* Runtime representation a type that a Component or other object is instances of.
*
* An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
* the `MyCustomComponent` constructor function.
*/
interface Type extends Function {
new(...args: any[]): any;
}
class Observable {
observer(generator: any): Object;
}
/**
* Use by directives and components to emit custom Events.
*
* ## Examples
*
* In the following example, `Zippy` alternatively emits `open` and `close` events when its
* title gets clicked:
*
* ```
* @Component({selector: 'zippy'})
* @View({template: `
* <div class="zippy">
* <div (click)="toggle()">Toggle</div>
* <div [hidden]="!visible">
* <ng-content></ng-content>
* </div>
* </div>`})
* export class Zippy {
* visible: boolean = true;
* @Output() open: EventEmitter = new EventEmitter();
* @Output() close: EventEmitter = new EventEmitter();
*
* toggle() {
* this.visible = !this.visible;
* if (this.visible) {
* this.open.next(null);
* } else {
* this.close.next(null);
* }
* }
* }
* ```
*
* Use Rx.Observable but provides an adapter to make it work as specified here:
* https://github.com/jhusain/observable-spec
*
* Once a reference implementation of the spec is available, switch to it.
*/
class EventEmitter extends Observable {
observer(generator: any): any;
toRx(): any;
next(value: any): void;
throw(error: any): void;
return(value?: any): void;
}
interface Predicate<T> {
(value: T, index?: number, array?: T[]): boolean;
}
class WrappedException extends Error {
constructor(_wrapperMessage: string, _originalException: any, _originalStack?: any, _context?: any);
wrapperMessage: string;
wrapperStack: any;
originalException: any;
originalStack: any;
context: any;
message: string;
toString(): string;
}
/**
* Constructs the set of bindings meant for use at the platform level.
*
* These are bindings that should be singletons shared among all Angular applications
* running on the page.
*/
function platformBindings(): Array<Type | Binding | any[]>;
/**
* Construct a default set of bindings which should be included in any Angular
* application, regardless of whether it runs on the UI thread or in a web worker.
*/
function applicationCommonBindings(): Array<Type | Binding | any[]>;
/**
* Create an Angular zone.
*/
function createNgZone(): NgZone;
/**
* @private
*/
function platformCommon(bindings?: Array<Type | Binding | any[]>, initializer?: () => void): PlatformRef;
/**
* The Angular platform is the entry point for Angular on a web page. Each page
* has exactly one platform, and services (such as reflection) which are common
* to every Angular application running on the page are bound in its scope.
*
* A page's platform is initialized implicitly when {@link bootstrap}() is called, or
* explicitly by calling {@link platform}().
*/
interface PlatformRef {
/**
* Retrieve the platform {@link Injector}, which is the parent injector for
* every Angular application on the page and provides singleton bindings.
*/
injector: Injector;
/**
* Instantiate a new Angular application on the page.
*
* # What is an application?
*
* Each Angular application has its own zone, change detection, compiler,
* renderer, and other framework components. An application hosts one or more
* root components, which can be initialized via `ApplicationRef.bootstrap()`.
*
* # Application Bindings
*
* Angular applications require numerous bindings to be properly instantiated.
* When using `application()` to create a new app on the page, these bindings
* must be provided. Fortunately, there are helper functions to configure
* typical bindings, as shown in the example below.
*
* # Example
* ```
* var myAppBindings = [MyAppService];
*
* platform()
* .application([applicationCommonBindings(), applicationDomBindings(), myAppBindings])
* .bootstrap(MyTopLevelComponent);
* ```
* # See Also
*
* See the {@link bootstrap} documentation for more details.
*/
application(bindings: Array<Type | Binding | any[]>): ApplicationRef;
/**
* Instantiate a new Angular application on the page, using bindings which
* are only available asynchronously. One such use case is to initialize an
* application running in a web worker.
*
* # Usage
*
* `bindingFn` is a function that will be called in the new application's zone.
* It should return a {@link Promise} to a list of bindings to be used for the
* new application. Once this promise resolves, the application will be
* constructed in the same manner as a normal `application()`.
*/
asyncApplication(bindingFn: (zone: NgZone) =>
Promise<Array<Type | Binding | any[]>>): Promise<ApplicationRef>;
/**
* Destroy the Angular platform and all Angular applications on the page.
*/
dispose(): void;
}
/**
* A reference to an Angular application running on a page.
*
* For more about Angular applications, see the documentation for {@link bootstrap}.
*/
interface ApplicationRef {
/**
* Register a listener to be called each time `bootstrap()` is called to bootstrap
* a new root component.
*/
registerBootstrapListener(listener: (ref: ComponentRef) => void): void;
/**
* Bootstrap a new component at the root level of the application.
*
* # Bootstrap process
*
* When bootstrapping a new root component into an application, Angular mounts the
* specified application component onto DOM elements identified by the [componentType]'s
* selector and kicks off automatic change detection to finish initializing the component.
*
* # Optional Bindings
*
* Bindings for the given component can optionally be overridden via the `bindings`
* parameter. These bindings will only apply for the root component being added and any
* child components under it.
*
* # Example
* ```
* var app = platform.application([applicationCommonBindings(), applicationDomBindings()];
* app.bootstrap(FirstRootComponent);
* app.bootstrap(SecondRootComponent, [bind(OverrideBinding).toClass(OverriddenBinding)]);
* ```
*/
bootstrap(componentType: Type, bindings?: Array<Type | Binding | any[]>): Promise<ComponentRef>;
/**
* Retrieve the application {@link Injector}.
*/
injector: Injector;
/**
* Retrieve the application {@link NgZone}.
*/
zone: NgZone;
/**
* Dispose of this application and all of its components.
*/
dispose(): void;
}
/**
* 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 {
constructor(value: string);
/**
* 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;
}
/**
* A service that can be used to get and set the title of a current HTML document.
*
* Since an Angular 2 application can't be bootstrapped on the entire HTML document (`<html>` tag)
* it is not possible to bind to the `text` property of the `HTMLTitleElement` elements
* (representing the `<title>` tag). Instead, this service can be used to set and get the current
* title value.
*/
class Title {
/**
* Get the title of the current HTML document.
* @returns {string}
*/
getTitle(): string;
/**
* Set the title of the current HTML document.
* @param newTitle
*/
setTitle(newTitle: string): void;
}
class DirectiveResolver {
/**
* Return {@link DirectiveMetadata} for a given `Type`.
*/
resolve(type: Type): DirectiveMetadata;
}
/**
* Low-level service for compiling {@link Component}s into {@link ProtoViewRef ProtoViews}s, which
* can later be used to create and render a Component instance.
*
* Most applications should instead use higher-level {@link DynamicComponentLoader} service, which
* both compiles and instantiates a Component.
*/
interface Compiler {
compileInHost(componentType: Type): Promise<ProtoViewRef>;
clearCache(): void;
}
/**
* Service exposing low level API for creating, moving and destroying Views.
*
* Most applications should use higher-level abstractions like {@link DynamicComponentLoader} and
* {@link ViewContainerRef} instead.
*/
interface AppViewManager {
/**
* Returns a {@link ViewContainerRef} of the View Container at the specified location.
*/
getViewContainer(location: ElementRef): ViewContainerRef;
/**
* Returns the {@link ElementRef} that makes up the specified Host View.
*/
getHostElement(hostViewRef: HostViewRef): ElementRef;
/**
* Searches the Component View of the Component specified via `hostLocation` and returns the
* {@link ElementRef} for the Element identified via a Variable Name `variableName`.
*
* Throws an exception if the specified `hostLocation` is not a Host Element of a Component, or if
* variable `variableName` couldn't be found in the Component View of this Component.
*/
getNamedElementInComponentView(hostLocation: ElementRef, variableName: string): ElementRef;
/**
* Returns the component instance for the provided Host Element.
*/
getComponent(hostLocation: ElementRef): any;
/**
* Creates an instance of a Component and attaches it to the first element in the global View
* (usually DOM Document) that matches the component's selector or `overrideSelector`.
*
* This as a low-level way to bootstrap an application and upgrade an existing Element to a
* Host Element. Most applications should use {@link DynamicComponentLoader#loadAsRoot} instead.
*
* The Component and its View are created based on the `hostProtoViewRef` which can be obtained
* by compiling the component with {@link Compiler#compileInHost}.
*
* Use {@link AppViewManager#destroyRootHostView} to destroy the created Component and it's Host
* View.
*
* ## Example
*
* ```
* @ng.Component({
* selector: 'child-component'
* })
* @ng.View({
* template: 'Child'
* })
* class ChildComponent {
*
* }
*
* @ng.Component({
* selector: 'my-app'
* })
* @ng.View({
* template: `
* Parent (<some-component></some-component>)
* `
* })
* 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;
/**
* Destroys the Host View created via {@link AppViewManager#createRootHostView}.
*
* Along with the Host View, the Component Instance as well as all nested View and Components are
* destroyed as well.
*/
destroyRootHostView(hostViewRef: HostViewRef): void;
/**
* Instantiates an Embedded View based on the {@link TemplateRef `templateRef`} and inserts it
* into the View Container specified via `viewContainerLocation` at the specified `index`.
*
* Returns the {@link ViewRef} for the newly created View.
*
* This as a low-level way to create and attach an Embedded via to a View Container. Most
* applications should used {@link ViewContainerRef#createEmbeddedView} instead.
*
* Use {@link AppViewManager#destroyViewInContainer} to destroy the created Embedded View.
*/
createEmbeddedViewInContainer(viewContainerLocation: ElementRef, index: number, templateRef: TemplateRef): ViewRef;
/**
* Instantiates a single {@link Component} and inserts its Host View into the View Container
* found at `viewContainerLocation`. Within the container, the view will be inserted at position
* specified via `index`.
*
* The component is instantiated using its {@link ProtoViewRef `protoViewRef`} which can be
* obtained via {@link Compiler#compileInHost}.
*
* You can optionally specify `imperativelyCreatedInjector`, which configure the {@link Injector}
* that will be created for the Host View.
*
* Returns the {@link HostViewRef} of the Host View created for the newly instantiated Component.
*
* Use {@link AppViewManager#destroyViewInContainer} to destroy the created Host View.
*/
createHostViewInContainer(viewContainerLocation: ElementRef, index: number, protoViewRef: ProtoViewRef, imperativelyCreatedInjector: ResolvedBinding[]): HostViewRef;
/**
* Destroys an Embedded or Host View attached to a View Container at the specified `index`.
*
* The View Container is located via `viewContainerLocation`.
*/
destroyViewInContainer(viewContainerLocation: ElementRef, index: number): void;
/**
* See {@link AppViewManager#detachViewInContainer}.
*/
attachViewInContainer(viewContainerLocation: ElementRef, index: number, viewRef: ViewRef): ViewRef;
/**
* See {@link AppViewManager#attachViewInContainer}.
*/
detachViewInContainer(viewContainerLocation: ElementRef, index: number): ViewRef;
}
/**
* An unmodifiable list of items that Angular keeps up to date when the state
* of the application changes.
*
* The type of object that {@link QueryMetadata} and {@link ViewQueryMetadata} provide.
*
* Implements an iterable interface, therefore it can be used in both ES6
* javascript `for (var i of items)` loops as well as in Angular templates with
* `*ng-for="#i of myList"`.
*
* Changes can be observed by subscribing to the changes `Observable`.
*
* NOTE: In the future this class will implement an `Observable` interface.
*
* ### Example ([live demo](http://plnkr.co/edit/RX8sJnQYl9FWuSCWme5z?p=preview))
* ```javascript
* @Component({...})
* class Container {
* constructor(@Query(Item) items: QueryList<Item>) {
* items.changes.subscribe(_ => console.log(items.length));
* }
* }
* ```
*/
class QueryList<T> {
changes: Observable;
length: number;
first: T;
last: T;
/**
* returns a new list with the passsed in function applied to each element.
*/
map<U>(fn: (item: T) => U): U[];
toString(): string;
}
/**
* Service for instantiating a Component and attaching it to a View at a specified location.
*/
interface DynamicComponentLoader {
/**
* Creates an instance of a Component `type` and attaches it to the first element in the
* platform-specific global view that matches the component's selector.
*
* In a browser the platform-specific global view is the main DOM Document.
*
* If needed, the component's selector can be overridden via `overrideSelector`.
*
* You can optionally provide `injector` and this {@link Injector} will be used to instantiate the
* Component.
*
* To be notified when this Component instance is destroyed, you can also optionally provide
* `onDispose` callback.
*
* Returns a promise for the {@link ComponentRef} representing the newly created Component.
*
*
* ## Example
*
* ```
* @ng.Component({
* selector: 'child-component'
* })
* @ng.View({
* template: 'Child'
* })
* class ChildComponent {
* }
*
*
*
* @ng.Component({
* selector: 'my-app'
* })
* @ng.View({
* template: `
* Parent (<child id="child"></child>)
* `
* })
* class MyApp {
* constructor(dynamicComponentLoader: ng.DynamicComponentLoader, injector: ng.Injector) {
* dynamicComponentLoader.loadAsRoot(ChildComponent, '#child', injector);
* }
* }
*
* ng.bootstrap(MyApp);
* ```
*
* Resulting DOM:
*
* ```
* <my-app>
* Parent (
* <child id="child">
* Child
* </child>
* )
* </my-app>
* ```
*/
loadAsRoot(type: Type, overrideSelector: string, injector: Injector, onDispose?: () => void): Promise<ComponentRef>;
/**
* Creates an instance of a Component and attaches it to a View Container located inside of the
* Component View of another Component instance.
*
* The targeted Component Instance is specified via its `hostLocation` {@link ElementRef}. The
* location within the Component View of this Component Instance is specified via `anchorName`
* Template Variable Name.
*
* You can optionally provide `bindings` to configure the {@link Injector} provisioned for this
* Component Instance.
*
* Returns a promise for the {@link ComponentRef} representing the newly created Component.
*
*
* ## Example
*
* ```
* @ng.Component({
* selector: 'child-component'
* })
* @ng.View({
* template: 'Child'
* })
* class ChildComponent {
* }
*
*
* @ng.Component({
* selector: 'my-app'
* })
* @ng.View({
* template: `
* Parent (<div #child></div>)
* `
* })
* class MyApp {
* constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
* dynamicComponentLoader.loadIntoLocation(ChildComponent, elementRef, 'child');
* }
* }
*
* ng.bootstrap(MyApp);
* ```
*
* Resulting DOM:
*
* ```
* <my-app>
* Parent (
* <div #child="" class="ng-binding"></div>
* <child-component class="ng-binding">Child</child-component>
* )
* </my-app>
* ```
*/
loadIntoLocation(type: Type, hostLocation: ElementRef, anchorName: string, bindings?: ResolvedBinding[]): Promise<ComponentRef>;
/**
* Creates an instance of a Component and attaches it to the View Container found at the
* `location` specified as {@link ElementRef}.
*
* You can optionally provide `bindings` to configure the {@link Injector} provisioned for this
* Component Instance.
*
* Returns a promise for the {@link ComponentRef} representing the newly created Component.
*
*
* ## Example
*
* ```
* @ng.Component({
* selector: 'child-component'
* })
* @ng.View({
* template: 'Child'
* })
* class ChildComponent {
* }
*
*
* @ng.Component({
* selector: 'my-app'
* })
* @ng.View({
* template: `Parent`
* })
* class MyApp {
* constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
* dynamicComponentLoader.loadNextToLocation(ChildComponent, elementRef);
* }
* }
*
* ng.bootstrap(MyApp);
* ```
*
* Resulting DOM:
*
* ```
* <my-app>Parent</my-app>
* <child-component>Child</child-component>
* ```
*/
loadNextToLocation(type: Type, location: ElementRef, bindings?: ResolvedBinding[]): Promise<ComponentRef>;
}
/**
* Represents a location in a View that has an injection, change-detection and render context
* associated with it.
*
* An `ElementRef` is created for each element in the Template that contains a Directive, Component
* or data-binding.
*
* An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM
* element.
*/
interface ElementRef extends RenderElementRef {
/**
* The underlying native element or `null` if direct access to native elements is not supported
* (e.g. when the application runs in a web worker).
*
* <div class="callout is-critical">
* <header>Use with caution</header>
* <p>
* Use this API as the last resort when direct access to DOM is needed. Use templating and
* data-binding provided by Angular instead. Alternatively you take a look at {@link Renderer}
* which provides API that can safely be used even when direct access to native elements is not
* supported.
* </p>
* <p>
* Relying on direct DOM access creates tight coupling between your application and rendering
* layers which will make it impossible to separate the two and deploy your application into a
* web worker.
* </p>
* </div>
*/
nativeElement: any;
}
/**
* Represents an Embedded Template that can be used to instantiate Embedded Views.
*
* You can access a `TemplateRef`, in two ways. Via a directive placed on a `<template>` element (or
* directive prefixed with `*`) and have the `TemplateRef` for this Embedded View injected into the
* constructor of the directive using the `TemplateRef` Token. Alternatively you can query for the
* `TemplateRef` from a Component or a Directive via {@link Query}.
*
* To instantiate Embedded Views based on a Template, use
* {@link ViewContainerRef#createEmbeddedView}, which will create the View and attach it to the
* View Container.
*/
interface TemplateRef {
/**
* The location in the View where the Embedded View logically belongs to.
*
* The data-binding and injection contexts of Embedded Views created from this `TemplateRef`
* inherit from the contexts of this location.
*
* Typically new Embedded Views are attached to the View Container of this location, but in
* advanced use-cases, the View can be attached to a different container while keeping the
* data-binding and injection context from the original location.
*/
elementRef: ElementRef;
/**
* Allows you to check if this Embedded Template defines Local Variable with name matching `name`.
*/
hasLocal(name: string): boolean;
}
/**
* Represents an Angular View.
*
* <!-- TODO: move the next two paragraphs to the dev guide -->
* A View is a fundamental building block of the application UI. It is the smallest grouping of
* Elements which are created and destroyed together.
*
* Properties of elements in a View can change, but the structure (number and order) of elements in
* a View cannot. Changing the structure of Elements can only be done by inserting, moving or
* removing nested Views via a {@link ViewContainer}. Each View can contain many View Containers.
* <!-- /TODO -->
*
* ## Example
*
* Given this template...
*
* ```
* Count: {{items.length}}
* <ul>
* <li *ng-for="var item of items">{{item}}</li>
* </ul>
* ```
*
* ... we have two {@link ProtoViewRef}s:
*
* Outer {@link ProtoViewRef}:
* ```
* Count: {{items.length}}
* <ul>
* <template ng-for var-item [ng-for-of]="items"></template>
* </ul>
* ```
*
* Inner {@link ProtoViewRef}:
* ```
* <li>{{item}}</li>
* ```
*
* Notice that the original template is broken down into two separate {@link ProtoViewRef}s.
*
* The outer/inner {@link ProtoViewRef}s are then assembled into views like so:
*
* ```
* <!-- ViewRef: outer-0 -->
* Count: 2
* <ul>
* <template view-container-ref></template>
* <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
* <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
* </ul>
* <!-- /ViewRef: outer-0 -->
* ```
*/
interface ViewRef extends HostViewRef {
/**
* Sets `value` of local variable called `variableName` in this View.
*/
setLocal(variableName: string, value: any): void;
}
/**
* Represents a View containing a single Element that is the Host Element of a {@link Component}
* instance.
*
* A Host View is created for every dynamically created Component that was compiled on its own (as
* opposed to as a part of another Component's Template) via {@link Compiler#compileInHost} or one
* of the higher-level APIs: {@link AppViewManager#createRootHostView},
* {@link AppViewManager#createHostViewInContainer}, {@link ViewContainerRef#createHostView}.
*/
interface HostViewRef {
}
/**
* Represents an Angular ProtoView.
*
* A ProtoView is a prototypical {@link ViewRef View} that is the result of Template compilation and
* is used by Angular to efficiently create an instance of this View based on the compiled Template.
*
* Most ProtoViews are created and used internally by Angular and you don't need to know about them,
* except in advanced use-cases where you compile components yourself via the low-level
* {@link Compiler#compileInHost} API.
*
*
* ## Example
*
* Given this template:
*
* ```
* Count: {{items.length}}
* <ul>
* <li *ng-for="var item of items">{{item}}</li>
* </ul>
* ```
*
* Angular desugars and compiles the template into two ProtoViews:
*
* Outer ProtoView:
* ```
* Count: {{items.length}}
* <ul>
* <template ng-for var-item [ng-for-of]="items"></template>
* </ul>
* ```
*
* Inner ProtoView:
* ```
* <li>{{item}}</li>
* ```
*
* Notice that the original template is broken down into two separate ProtoViews.
*/
interface ProtoViewRef {
}
/**
* Represents a container where one or more Views can be attached.
*
* The container can contain two kinds of Views. Host Views, created by instantiating a
* {@link Component} via {@link #createHostView}, and Embedded Views, created by instantiating an
* {@link TemplateRef Embedded Template} via {@link #createEmbeddedView}.
*
* The location of the View Container within the containing View is specified by the Anchor
* `element`. Each View Container can have only one Anchor Element and each Anchor Element can only
* have a single View Container.
*
* Root elements of Views attached to this container become siblings of the Anchor Element in
* the Rendered View.
*
* To access a `ViewContainerRef` of an Element, you can either place a {@link Directive} injected
* with `ViewContainerRef` on the Element, or you obtain it via
* {@link AppViewManager#getViewContainer}.
*
* <!-- TODO(i): we are also considering ElementRef#viewContainer api -->
*/
interface ViewContainerRef {
/**
* Anchor element that specifies the location of this container in the containing View.
* <!-- TODO: rename to anchorElement -->
*/
element: ElementRef;
/**
* Destroys all Views in this container.
*/
clear(): void;
/**
* Returns the {@link ViewRef} for the View located in this container at the specified index.
*/
get(index: number): ViewRef;
/**
* Returns the number of Views currently attached to this container.
*/
length: number;
/**
* Instantiates an Embedded View based on the {@link TemplateRef `templateRef`} and inserts it
* into this container at the specified `index`.
*
* If `index` is not specified, the new View will be inserted as the last View in the container.
*
* Returns the {@link ViewRef} for the newly created View.
*/
createEmbeddedView(templateRef: TemplateRef, index?: number): ViewRef;
/**
* Instantiates a single {@link Component} and inserts its Host View into this container at the
* specified `index`.
*
* The component is instantiated using its {@link ProtoViewRef `protoView`} which can be
* obtained via {@link Compiler#compileInHost}.
*
* If `index` is not specified, the new View will be inserted as the last View in the container.
*
* You can optionally specify `dynamicallyCreatedBindings`, which configure the {@link Injector}
* that will be created for the Host View.
*
* Returns the {@link HostViewRef} of the Host View created for the newly instantiated Component.
*/
createHostView(protoViewRef?: ProtoViewRef, index?: number, dynamicallyCreatedBindings?: ResolvedBinding[]): HostViewRef;
/**
* Inserts a View identified by a {@link ViewRef} into the container at the specified `index`.
*
* If `index` is not specified, the new View will be inserted as the last View in the container.
*
* Returns the inserted {@link ViewRef}.
*/
insert(viewRef: ViewRef, index?: number): ViewRef;
/**
* Returns the index of the View, specified via {@link ViewRef}, within the current container or
* `-1` if this container doesn't contain the View.
*/
indexOf(viewRef: ViewRef): number;
/**
* Destroys a View attached to this container at the specified `index`.
*
* If `index` is not specified, the last View in the container will be removed.
*/
remove(index?: number): void;
/**
* Use along with {@link #insert} to move a View within the current container.
*
* If the `index` param is omitted, the last {@link ViewRef} is detached.
*/
detach(index?: number): ViewRef;
}
/**
* Represents an instance of a Component created via {@link DynamicComponentLoader}.
*
* `ComponentRef` provides access to the Component Instance as well other objects related to this
* Component Instance and allows you to destroy the Component Instance via the {@link #dispose}
* method.
*/
interface ComponentRef {
/**
* Location of the Host Element of this Component Instance.
*/
location: ElementRef;
/**
* The instance of the Component.
*/
instance: any;
/**
* The user defined component type, represented via the constructor function.
*
* <!-- TODO: customize wording for Dart docs -->
*/
componentType: Type;
/**
* The {@link ViewRef} of the Host View of this Component instance.
*/
hostView: HostViewRef;
/**
* Destroys the component instance and all of the data structures associated with it.
*
* TODO(i): rename to destroy to be consistent with AppViewManager and ViewContainerRef
*/
dispose(): void;
}
/**
* Provides access to explicitly trigger change detection in an application.
*
* By default, `Zone` triggers change detection in Angular on each virtual machine (VM) turn. When
* testing, or in some
* limited application use cases, a developer can also trigger change detection with the
* `lifecycle.tick()` method.
*
* Each Angular application has a single `LifeCycle` instance.
*
* # Example
*
* This is a contrived example, since the bootstrap automatically runs inside of the `Zone`, which
* invokes
* `lifecycle.tick()` on your behalf.
*
* ```javascript
* bootstrap(MyApp).then((ref:ComponentRef) => {
* var lifeCycle = ref.injector.get(LifeCycle);
* var myApp = ref.instance;
*
* ref.doSomething();
* lifecycle.tick();
* });
* ```
*/
interface LifeCycle {
/**
* Invoke this method to explicitly process change detection and its side-effects.
*
* In development mode, `tick()` also performs a second change detection cycle to ensure that no
* further
* changes are detected. If additional changes are picked up during this second cycle, bindings
* in
* the app have
* side-effects that cannot be resolved in a single change detection pass. In this case, Angular
* throws an error,
* since an Angular application can only have one change detection pass during which all change
* detection must
* complete.
*/
tick(): void;
}
/**
* An injectable service for executing work inside or outside of the Angular zone.
*
* The most common use of this service is to optimize performance when starting a work consisting of
* one or more asynchronous tasks that don't require UI updates or error handling to be handled by
* Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
* can reenter the Angular zone via {@link #run}.
*
* <!-- TODO: add/fix links to:
* - docs explaining zones and the use of zones in Angular and change-detection
* - link to runOutsideAngular/run (throughout this file!)
* -->
*
* ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
* ```
* import {Component, View, NgIf, NgZone} from 'angular2/angular2';
*
* @Component({
* selector: 'ng-zone-demo'
* })
* @View({
* template: `
* <h2>Demo: NgZone</h2>
*
* <p>Progress: {{progress}}%</p>
* <p *ng-if="progress >= 100">Done processing {{label}} of Angular zone!</p>
*
* <button (click)="processWithinAngularZone()">Process within Angular zone</button>
* <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
* `,
* directives: [NgIf]
* })
* export class NgZoneDemo {
* progress: number = 0;
* label: string;
*
* constructor(private _ngZone: NgZone) {}
*
* // Loop inside the Angular zone
* // so the UI DOES refresh after each setTimeout cycle
* processWithinAngularZone() {
* this.label = 'inside';
* this.progress = 0;
* this._increaseProgress(() => console.log('Inside Done!'));
* }
*
* // Loop outside of the Angular zone
* // so the UI DOES NOT refresh after each setTimeout cycle
* processOutsideOfAngularZone() {
* this.label = 'outside';
* this.progress = 0;
* this._ngZone.runOutsideAngular(() => {
* this._increaseProgress(() => {
* // reenter the Angular zone and display done
* this._ngZone.run(() => {console.log('Outside Done!') });
* }}));
* }
*
*
* _increaseProgress(doneCallback: () => void) {
* this.progress += 1;
* console.log(`Current progress: ${this.progress}%`);
*
* if (this.progress < 100) {
* window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
* } else {
* doneCallback();
* }
* }
* }
* ```
*/
interface NgZone {
/**
* Executes the `fn` function synchronously within the Angular zone and returns value returned by
* the function.
*
* Running functions via `run` allows you to reenter Angular zone from a task that was executed
* outside of the Angular zone (typically started via {@link #runOutsideAngular}).
*
* Any future tasks or microtasks scheduled from within this function will continue executing from
* within the Angular zone.
*/
run(fn: () => any): any;
/**
* Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
* the function.
*
* Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
* doesn't trigger Angular change-detection or is subject to Angular's error handling.
*
* Any future tasks or microtasks scheduled from within this function will continue executing from
* outside of the Angular zone.
*
* Use {@link #run} to reenter the Angular zone and do work that updates the application model.
*/
runOutsideAngular(fn: () => any): any;
}
/**
* Adds and removes CSS classes based on an {expression} value.
*
* The result of expression is used to add and remove CSS classes using the following logic,
* based on expression's value type:
* - {string} - all the CSS classes (space - separated) are added
* - {Array} - all the CSS classes (Array elements) are added
* - {Object} - each key corresponds to a CSS class name while values
* are interpreted as {boolean} expression. If a given expression
* evaluates to {true} a corresponding CSS class is added - otherwise
* it is removed.
*
* # Example:
*
* ```
* <div class="message" [ng-class]="{error: errorCount > 0}">
* Please check errors.
* </div>
* ```
*/
class NgClass implements DoCheck, OnDestroy {
constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer);
initialClasses: any;
rawClass: any;
doCheck(): void;
onDestroy(): void;
}
/**
* The `NgFor` directive instantiates a template once per item from an iterable. The context for
* each instantiated template inherits from the outer context with the given loop variable set
* to the current item from the iterable.
*
* It is possible to alias the `index` to a local variable that will be set to the current loop
* iteration in the template context, and also to alias the 'last' to a local variable that will
* be set to a boolean indicating if the item is the last one in the iteration
*
* When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM:
*
* * When an item is added, a new instance of the template is added to the DOM.
* * When an item is removed, its template instance is removed from the DOM.
* * When items are reordered, their respective templates are reordered in the DOM.
*
* # Example
*
* ```
* <ul>
* <li *ng-for="#error of errors; #i = index">
* Error {{i}} of {{errors.length}}: {{error.message}}
* </li>
* </ul>
* ```
*
* # Syntax
*
* - `<li *ng-for="#item of items; #i = index">...</li>`
* - `<li template="ng-for #item of items; #i = index">...</li>`
* - `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>`
*/
class NgFor implements DoCheck {
constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef, _iterableDiffers: IterableDiffers, _cdr: ChangeDetectorRef);
ngForOf: any;
doCheck(): void;
}
/**
* Removes or recreates a portion of the DOM tree based on an {expression}.
*
* If the expression assigned to `ng-if` evaluates to a false value then the element
* is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
*
* ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
*
* ```
* <div *ng-if="errorCount > 0" class="error">
* <!-- Error message displayed when the errorCount property on the current context is greater
* than 0. -->
* {{errorCount}} errors detected
* </div>
* ```
*
* # Syntax
*
* - `<div *ng-if="condition">...</div>`
* - `<div template="ng-if condition">...</div>`
* - `<template [ng-if]="condition"><div>...</div></template>`
*/
class NgIf {
constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef);
ngIf: any;
}
/**
* Adds or removes styles based on an {expression}.
*
* When the expression assigned to `ng-style` evaluates to an object, the corresponding element
* styles are updated. Style names to update are taken from the object keys and values - from the
* corresponding object values.
*
* # Example:
*
* ```
* <div [ng-style]="{'text-align': alignExp}"></div>
* ```
*
* In the above example the `text-align` style will be updated based on the `alignExp` value
* changes.
*
* # Syntax
*
* - `<div [ng-style]="{'text-align': alignExp}"></div>`
* - `<div [ng-style]="styleExp"></div>`
*/
class NgStyle implements DoCheck {
constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer);
rawStyle: any;
doCheck(): void;
}
/**
* The `NgSwitch` directive is used to conditionally swap DOM structure on your template based on a
* scope expression.
* Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be
* preserved at the location as specified in the template.
*
* `NgSwitch` simply chooses nested elements and makes them visible based on which element matches
* the value obtained from the evaluated expression. In other words, you define a container element
* (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
* define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
* element.
* The when attribute is used to inform NgSwitch which element to display when the expression is
* evaluated. If a matching expression is not found via a when attribute then an element with the
* default attribute is displayed.
*
* # Example:
*
* ```
* <ANY [ng-switch]="expression">
* <template [ng-switch-when]="whenExpression1">...</template>
* <template [ng-switch-when]="whenExpression1">...</template>
* <template ng-switch-default>...</template>
* </ANY>
* ```
*/
class NgSwitch {
ngSwitch: any;
}
/**
* Defines a case statement as an expression.
*
* If multiple `NgSwitchWhen` match the `NgSwitch` value, all of them are displayed.
*
* Example:
*
* ```
* // match against a context variable
* <template [ng-switch-when]="contextVariable">...</template>
*
* // match against a constant string
* <template ng-switch-when="stringValue">...</template>
* ```
*/
class NgSwitchWhen {
constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, _switch: NgSwitch);
ngSwitchWhen: any;
}
/**
* Defines a default case statement.
*
* Default case statements are displayed when no `NgSwitchWhen` match the `ng-switch` value.
*
* Example:
*
* ```
* <template ng-switch-default>...</template>
* ```
*/
class NgSwitchDefault {
constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, sswitch: NgSwitch);
}
/**
* A collection of Angular core directives that are likely to be used in each and every Angular
* application.
*
* This collection can be used to quickly enumerate all the built-in directives in the `directives`
* property of the `@View` annotation.
*
* ### Example ([live demo](http://plnkr.co/edit/yakGwpCdUkg0qfzX5m8g?p=preview))
*
* Instead of writing:
*
* ```typescript
* import {NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
* import {OtherDirective} from './myDirectives';
*
* @Component({
* selector: 'my-component'
* })
* @View({
* templateUrl: 'myComponent.html',
* directives: [NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
* })
* export class MyComponent {
* ...
* }
* ```
* one could import all the core directives at once:
*
* ```typescript
* import {CORE_DIRECTIVES} from 'angular2/angular2';
* import {OtherDirective} from './myDirectives';
*
* @Component({
* selector: 'my-component'
* })
* @View({
* templateUrl: 'myComponent.html',
* directives: [CORE_DIRECTIVES, OtherDirective]
* })
* export class MyComponent {
* ...
* }
* ```
*/
let CORE_DIRECTIVES: Type[];
/**
* Omitting from external API doc as this is really an abstract internal concept.
*/
class AbstractControl {
constructor(validator: Function);
validator: Function;
value: any;
status: string;
valid: boolean;
errors: {[key: string]: any};
pristine: boolean;
dirty: boolean;
touched: boolean;
untouched: boolean;
valueChanges: Observable;
markAsTouched(): void;
markAsDirty({onlySelf}?: {onlySelf?: boolean}): void;
setParent(parent: ControlGroup | ControlArray): void;
updateValidity({onlySelf}?: {onlySelf?: boolean}): void;
updateValueAndValidity({onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}): void;
find(path: Array<string | number>| string): AbstractControl;
getError(errorCode: string, path?: string[]): any;
hasError(errorCode: string, path?: string[]): boolean;
}
/**
* Defines a part of a form that cannot be divided into other controls. `Control`s have values and
* validation state, which is determined by an optional validation function.
*
* `Control` is one of the three fundamental building blocks used to define forms in Angular, along
* with {@link ControlGroup} and {@link ControlArray}.
*
* # Usage
*
* By default, a `Control` is created for every `<input>` or other form component.
* With {@link NgFormControl} or {@link NgFormModel} an existing {@link Control} can be
* bound to a DOM element instead. This `Control` can be configured with a custom
* validation function.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*/
class Control extends AbstractControl {
constructor(value?: any, validator?: Function);
/**
* Set the value of the control to `value`.
*
* If `onlySelf` is `true`, this change will only affect the validation of this `Control`
* and not its parent component. If `emitEvent` is `true`, this change will cause a
* `valueChanges` event on the `Control` to be emitted. Both of these options default to
* `false`.
*
* If `emitModelToViewChange` is `true`, the view will be notified about the new value
* via an `onChange` event. This is the default behavior if `emitModelToViewChange` is not
* specified.
*/
updateValue(value: any, {onlySelf, emitEvent, emitModelToViewChange}?:
{onlySelf?: boolean, emitEvent?: boolean, emitModelToViewChange?: boolean}): void;
/**
* Register a listener for change events.
*/
registerOnChange(fn: Function): void;
}
/**
* Defines a part of a form, of fixed length, that can contain other controls.
*
* A `ControlGroup` aggregates the values and errors of each {@link Control} in the group. Thus, if
* one of the controls in a group is invalid, the entire group is invalid. Similarly, if a control
* changes its value, the entire group changes as well.
*
* `ControlGroup` is one of the three fundamental building blocks used to define forms in Angular,
* along with {@link Control} and {@link ControlArray}. {@link ControlArray} can also contain other
* controls, but is of variable length.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*/
class ControlGroup extends AbstractControl {
constructor(controls: {[key: string]: AbstractControl}, optionals?: {[key: string]: boolean}, validator?: Function);
controls: {[key: string]: AbstractControl};
addControl(name: string, control: AbstractControl): void;
removeControl(name: string): void;
include(controlName: string): void;
exclude(controlName: string): void;
contains(controlName: string): boolean;
}
/**
* Defines a part of a form, of variable length, that can contain other controls.
*
* A `ControlArray` aggregates the values and errors of each {@link Control} in the group. Thus, if
* one of the controls in a group is invalid, the entire group is invalid. Similarly, if a control
* changes its value, the entire group changes as well.
*
* `ControlArray` is one of the three fundamental building blocks used to define forms in Angular,
* along with {@link Control} and {@link ControlGroup}. {@link ControlGroup} can also contain
* other controls, but is of fixed length.
*
* # Adding or removing controls
*
* To change the controls in the array, use the `push`, `insert`, or `removeAt` methods
* in `ControlArray` itself. These methods ensure the controls are properly tracked in the
* form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
* the `ControlArray` directly, as that will result in strange and unexpected behavior such
* as broken change detection.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*/
class ControlArray extends AbstractControl {
constructor(controls: AbstractControl[], validator?: Function);
controls: AbstractControl[];
/**
* Get the {@link AbstractControl} at the given `index` in the array.
*/
at(index: number): AbstractControl;
/**
* Insert a new {@link AbstractControl} at the end of the array.
*/
push(control: AbstractControl): void;
/**
* Insert a new {@link AbstractControl} at the given `index` in the array.
*/
insert(index: number, control: AbstractControl): void;
/**
* Remove the control at the given `index` in the array.
*/
removeAt(index: number): void;
/**
* Get the length of the control array.
*/
length: number;
}
class AbstractControlDirective {
control: AbstractControl;
value: any;
valid: boolean;
errors: {[key: string]: any};
pristine: boolean;
dirty: boolean;
touched: boolean;
untouched: boolean;
}
/**
* An interface that {@link NgFormModel} and {@link NgForm} implement.
*
* Only used by the forms module.
*/
interface Form {
addControl(dir: NgControl): void;
removeControl(dir: NgControl): void;
getControl(dir: NgControl): Control;
addControlGroup(dir: NgControlGroup): void;
removeControlGroup(dir: NgControlGroup): void;
getControlGroup(dir: NgControlGroup): ControlGroup;
updateModel(dir: NgControl, value: any): void;
}
/**
* A directive that contains multiple {@link NgControl}.
*
* Only used by the forms module.
*/
class ControlContainer extends AbstractControlDirective {
name: string;
formDirective: Form;
path: string[];
}
/**
* Creates and binds a control with a specified name to a DOM element.
*
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
*
* # Example
*
* In this example, we create the login and password controls.
* We can work with each control separately: check its validity, get its value, listen to its
* changes.
*
* ```
* @Component({selector: "login-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `
* <form #f="form" (submit)='onLogIn(f.value)'>
* Login <input type='text' ng-control='login' #l="form">
* <div *ng-if="!l.valid">Login is invalid</div>
*
* Password <input type='password' ng-control='password'>
* <button type='submit'>Log in!</button>
* </form>
* `})
* class LoginComp {
* onLogIn(value): void {
* // value === {login: 'some login', password: 'some password'}
* }
* }
* ```
*
* We can also use ng-model to bind a domain model to the form.
*
* ```
* @Component({selector: "login-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `
* <form (submit)='onLogIn()'>
* Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
* Password <input type='password' ng-control='password'
* [(ng-model)]="credentials.password">
* <button type='submit'>Log in!</button>
* </form>
* `})
* class LoginComp {
* credentials: {login:string, password:string};
*
* onLogIn(): void {
* // this.credentials.login === "some login"
* // this.credentials.password === "some password"
* }
* }
* ```
*/
class NgControlName extends NgControl implements OnChanges,
OnDestroy {
constructor(parent: ControlContainer, validators: Function[], valueAccessors: ControlValueAccessor[]);
update: any;
model: any;
viewModel: any;
validators: Function[];
onChanges(changes: {[key: string]: SimpleChange}): void;
onDestroy(): void;
viewToModelUpdate(newValue: any): void;
path: string[];
formDirective: any;
control: Control;
validator: Function;
}
/**
* Binds an existing {@link Control} to a DOM element.
*
* ### Example ([live demo](http://plnkr.co/edit/jcQlZ2tTh22BZZ2ucNAT?p=preview))
*
* In this example, we bind the control to an input element. When the value of the input element
* changes, the value of the control will reflect that change. Likewise, if the value of the
* control changes, the input element reflects that change.
*
* ```typescript
* @Component({
* selector: 'my-app'
* })
* @View({
* template: `
* <div>
* <h2>NgFormControl Example</h2>
* <form>
* <p>Element with existing control: <input type="text"
* [ng-form-control]="loginControl"></p>
* <p>Value of existing control: {{loginControl.value}}</p>
* </form>
* </div>
* `,
* directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
* })
* export class App {
* loginControl: Control = new Control('');
* }
* ```
*
* # ng-model
*
* We can also use `ng-model` to bind a domain model to the form.
*
* ### Example ([live demo](http://plnkr.co/edit/yHMLuHO7DNgT8XvtjTDH?p=preview))
*
* ```typescript
* @Component({selector: "login-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
* })
* class LoginComp {
* loginControl: Control = new Control('');
* login:string;
* }
* ```
*/
class NgFormControl extends NgControl implements OnChanges {
constructor(validators: Function[], valueAccessors: ControlValueAccessor[]);
form: Control;
update: any;
model: any;
viewModel: any;
validators: Function[];
onChanges(changes: {[key: string]: SimpleChange}): void;
path: string[];
control: Control;
validator: Function;
viewToModelUpdate(newValue: any): void;
}
/**
* Binds a domain model to a form control.
*
* # Usage
*
* `ng-model` binds an existing domain model to a form control. For a
* two-way binding, use `[(ng-model)]` to ensure the model updates in
* both directions.
*
* ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview))
* ```typescript
* @Component({selector: "search-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `<input type='text' [(ng-model)]="searchQuery">`
* })
* class SearchComp {
* searchQuery: string;
* }
* ```
*/
class NgModel extends NgControl implements OnChanges {
constructor(validators: Function[], valueAccessors: ControlValueAccessor[]);
update: any;
model: any;
viewModel: any;
validators: Function[];
onChanges(changes: {[key: string]: SimpleChange}): void;
control: Control;
path: string[];
validator: Function;
viewToModelUpdate(newValue: any): void;
}
/**
* A base class that all control directive extend.
* It binds a {@link Control} object to a DOM element.
*/
class NgControl extends AbstractControlDirective {
name: string;
valueAccessor: ControlValueAccessor;
validator: Function;
path: string[];
viewToModelUpdate(newValue: any): void;
}
/**
* Creates and binds a control group to a DOM element.
*
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
*
* # Example
*
* In this example, we create the credentials and personal control groups.
* We can work with each group separately: check its validity, get its value, listen to its changes.
*
* ```
* @Component({selector: "signup-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `
* <form #f="form" (submit)='onSignUp(f.value)'>
* <div ng-control-group='credentials' #credentials="form">
* Login <input type='text' ng-control='login'>
* Password <input type='password' ng-control='password'>
* </div>
* <div *ng-if="!credentials.valid">Credentials are invalid</div>
*
* <div ng-control-group='personal'>
* Name <input type='text' ng-control='name'>
* </div>
* <button type='submit'>Sign Up!</button>
* </form>
* `})
* class SignupComp {
* onSignUp(value) {
* // value === {
* // personal: {name: 'some name'},
* // credentials: {login: 'some login', password: 'some password'}}
* }
* }
*
* ```
*/
class NgControlGroup extends ControlContainer implements OnInit,
OnDestroy {
constructor(_parent: ControlContainer);
onInit(): void;
onDestroy(): void;
control: ControlGroup;
path: string[];
formDirective: Form;
}
/**
* Binds an existing control group to a DOM element.
*
* ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
*
* In this example, we bind the control group to the form element, and we bind the login and
* password controls to the login and password elements.
*
* ```typescript
* @Component({
* selector: 'my-app'
* })
* @View({
* template: `
* <div>
* <h2>NgFormModel Example</h2>
* <form [ng-form-model]="loginForm">
* <p>Login: <input type="text" ng-control="login"></p>
* <p>Password: <input type="password" ng-control="password"></p>
* </form>
* <p>Value:</p>
* <pre>{{value}}</pre>
* </div>
* `,
* directives: [FORM_DIRECTIVES]
* })
* export class App {
* loginForm: ControlGroup;
*
* constructor() {
* this.loginForm = new ControlGroup({
* login: new Control(""),
* password: new Control("")
* });
* }
*
* get value(): string {
* return JSON.stringify(this.loginForm.value, null, 2);
* }
* }
* ```
*
* We can also use ng-model to bind a domain model to the form.
*
* ```typescript
* @Component({selector: "login-comp"})
* @View({
* directives: [FORM_DIRECTIVES],
* template: `
* <form [ng-form-model]='loginForm'>
* Login <input type='text' ng-control='login' [(ng-model)]='credentials.login'>
* Password <input type='password' ng-control='password'
* [(ng-model)]='credentials.password'>
* <button (click)="onLogin()">Login</button>
* </form>`
* })
* class LoginComp {
* credentials: {login: string, password: string};
* loginForm: ControlGroup;
*
* constructor() {
* this.loginForm = new ControlGroup({
* login: new Control(""),
* password: new Control("")
* });
* }
*
* onLogin(): void {
* // this.credentials.login === 'some login'
* // this.credentials.password === 'some password'
* }
* }
* ```
*/
class NgFormModel extends ControlContainer implements Form,
OnChanges {
form: ControlGroup;
directives: NgControl[];
ngSubmit: any;
onChanges(_: any): void;
formDirective: Form;
control: ControlGroup;
path: string[];
addControl(dir: NgControl): void;
getControl(dir: NgControl): Control;
removeControl(dir: NgControl): void;
addControlGroup(dir: NgControlGroup): void;
removeControlGroup(dir: NgControlGroup): void;
getControlGroup(dir: NgControlGroup): ControlGroup;
updateModel(dir: NgControl, value: any): void;
onSubmit(): boolean;
}
/**
* If `NgForm` is bound in a component, `<form>` elements in that component will be
* upgraded to use the Angular form system.
*
* # Typical Use
*
* Include `FORM_DIRECTIVES` in the `directives` section of a {@link View} annotation
* to use `NgForm` and its associated controls.
*
* # Structure
*
* An Angular form is a collection of {@link Control}s in some hierarchy.
* `Control`s can be at the top level or can be organized in {@link ControlGroups}
* or {@link ControlArray}s. This hierarchy is reflected in the form's `value`, a
* JSON object that mirrors the form structure.
*
* # Submission
*
* The `ng-submit` event signals when the user triggers a form submission.
*
* ### Example ([live demo](http://plnkr.co/edit/ltdgYj4P0iY64AR71EpL?p=preview))
*
* ```typescript
* @Component({
* selector: 'my-app'
* })
* @View({
* template: `
* <div>
* <p>Submit the form to see the data object Angular builds</p>
* <h2>NgForm demo</h2>
* <form #f="form" (ng-submit)="onSubmit(f.value)">
* <h3>Control group: credentials</h3>
* <div ng-control-group="credentials">
* <p>Login: <input type="text" ng-control="login"></p>
* <p>Password: <input type="password" ng-control="password"></p>
* </div>
* <h3>Control group: person</h3>
* <div ng-control-group="person">
* <p>First name: <input type="text" ng-control="firstName"></p>
* <p>Last name: <input type="text" ng-control="lastName"></p>
* </div>
* <button type="submit">Submit Form</button>
* <p>Form data submitted:</p>
* </form>
* <pre>{{data}}</pre>
* </div>
* `,
* directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
* })
* export class App {
* constructor() {}
*
* data: string;
*
* onSubmit(data) {
* this.data = JSON.stringify(data, null, 2);
* }
* }
* ```
*/
class NgForm extends ControlContainer implements Form {
form: ControlGroup;
ngSubmit: any;
formDirective: Form;
control: ControlGroup;
path: string[];
controls: {[key: string]: AbstractControl};
addControl(dir: NgControl): void;
getControl(dir: NgControl): Control;
removeControl(dir: NgControl): void;
addControlGroup(dir: NgControlGroup): void;
removeControlGroup(dir: NgControlGroup): void;
getControlGroup(dir: NgControlGroup): ControlGroup;
updateModel(dir: NgControl, value: any): void;
onSubmit(): boolean;
}
/**
* A bridge between a control and a native element.
*
* Please see {@link DefaultValueAccessor} for more information.
*/
interface ControlValueAccessor {
writeValue(obj: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
}
/**
* The default accessor for writing a value and listening to changes that is used by the
* {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
*
* # Example
* ```
* <input type="text" [(ng-model)]="searchQuery">
* ```
*/
class DefaultValueAccessor implements ControlValueAccessor {
constructor(_renderer: Renderer, _elementRef: ElementRef);
onChange: any;
onTouched: any;
writeValue(value: any): void;
registerOnChange(fn: (_: any) => void): void;
registerOnTouched(fn: () => void): void;
}
class NgControlStatus {
constructor(cd: NgControl);
ngClassUntouched: boolean;
ngClassTouched: boolean;
ngClassPristine: boolean;
ngClassDirty: boolean;
ngClassValid: boolean;
ngClassInvalid: boolean;
}
/**
* The accessor for writing a value and listening to changes on a checkbox input element.
*
* # Example
* ```
* <input type="checkbox" [ng-control]="rememberLogin">
* ```
*/
class CheckboxControlValueAccessor implements ControlValueAccessor {
constructor(_renderer: Renderer, _elementRef: ElementRef);
onChange: any;
onTouched: any;
writeValue(value: any): void;
registerOnChange(fn: (_: any) => {}): void;
registerOnTouched(fn: () => {}): void;
}
/**
* Marks `<option>` as dynamic, so Angular can be notified when options change.
*
* #Example:
*
* ```
* <select ng-control="city">
* <option *ng-for="#c of cities" [value]="c"></option>
* </select>
* ```
*/
class NgSelectOption {
}
/**
* The accessor for writing a value and listening to changes on a select element.
*/
class SelectControlValueAccessor implements ControlValueAccessor {
constructor(_renderer: Renderer, _elementRef: ElementRef, query: QueryList<NgSelectOption>);
value: string;
onChange: any;
onTouched: any;
writeValue(value: any): void;
registerOnChange(fn: () => any): void;
registerOnTouched(fn: () => any): void;
}
/**
* A list of all the form directives used as part of a `@View` annotation.
*
* This is a shorthand for importing them each individually.
*
* ### Example:
*
* ```typescript
* @View({
* directives: [FORM_DIRECTIVES]
* })
* @Component({
* selector: 'my-app'
* })
* class MyApp {}
* ```
*/
let FORM_DIRECTIVES: Type[];
let NG_VALIDATORS: OpaqueToken;
/**
* Provides a set of validators used by form controls.
*
* # Example
*
* ```
* var loginControl = new Control("", Validators.required)
* ```
*/
class Validators {
static required(control:Control): {[key: string]: boolean};
static nullValidator(c: any): {[key: string]: boolean};
static compose(validators: Function[]): Function;
static group(group:ControlGroup): {[key: string]: any[]};
static array(array:ControlArray): {[key: string]: any[]};
}
class DefaultValidators {
}
/**
* Creates a form object from a user-specified configuration.
*
* # Example
*
* ```
* import {Component, View, bootstrap} from 'angular2/angular2';
* import {FormBuilder, Validators, FORM_DIRECTIVES, ControlGroup} from 'angular2/core';
*
* @Component({
* selector: 'login-comp',
* viewBindings: [FormBuilder]
* })
* @View({
* template: `
* <form [control-group]="loginForm">
* Login <input control="login">
*
* <div control-group="passwordRetry">
* Password <input type="password" control="password">
* Confirm password <input type="password" control="passwordConfirmation">
* </div>
* </form>
* `,
* directives: [FORM_DIRECTIVES]
* })
* class LoginComp {
* loginForm: ControlGroup;
*
* constructor(builder: FormBuilder) {
* this.loginForm = builder.group({
* login: ["", Validators.required],
*
* passwordRetry: builder.group({
* password: ["", Validators.required],
* passwordConfirmation: ["", Validators.required]
* })
* });
* }
* }
*
* bootstrap(LoginComp);
* ```
*
* This example creates a {@link ControlGroup} that consists of a `login` {@link Control}, and a
* nested {@link ControlGroup} that defines a `password` and a `passwordConfirmation`
* {@link Control}:
*
* ```
* var loginForm = builder.group({
* login: ["", Validators.required],
*
* passwordRetry: builder.group({
* password: ["", Validators.required],
* passwordConfirmation: ["", Validators.required]
* })
* });
*
* ```
*/
class FormBuilder {
group(controlsConfig: {[key: string]: any}, extra?: {[key: string]: any}): ControlGroup;
control(value: Object, validator?: Function): Control;
array(controlsConfig: any[], validator?: Function): ControlArray;
}
/**
* Shorthand set of bindings used for building Angular forms.
*
* ### Example:
*
* ```typescript
* bootstrap(MyApp, [FORM_BINDINGS]);
* ```
*/
let FORM_BINDINGS: Type[];
function inspectNativeElement(element: any): DebugElement;
let ELEMENT_PROBE_BINDINGS: any[];
/**
* A DebugElement contains information from the Angular compiler about an
* element and provides access to the corresponding ElementInjector and
* underlying DOM Element, as well as a way to query for children.
*/
interface DebugElement {
componentInstance: any;
nativeElement: any;
elementRef: ElementRef;
getDirectiveInstance(directiveIndex: number): any;
/**
* Get child DebugElements from within the Light DOM.
*
* @return {DebugElement[]}
*/
children: DebugElement[];
/**
* Get the root DebugElement children of a component. Returns an empty
* list if the current DebugElement is not a component root.
*
* @return {DebugElement[]}
*/
componentViewChildren: DebugElement[];
triggerEventHandler(eventName: string, eventObj: Event): void;
hasDirective(type: Type): boolean;
inject(type: Type): any;
getLocal(name: string): any;
/**
* Return the first descendant TestElement matching the given predicate
* and scope.
*
* @param {Function: boolean} predicate
* @param {Scope} scope
*
* @return {DebugElement}
*/
query(predicate: Predicate<DebugElement>, scope?: Function): DebugElement;
/**
* Return descendant TestElememts matching the given predicate
* and scope.
*
* @param {Function: boolean} predicate
* @param {Scope} scope
*
* @return {DebugElement[]}
*/
queryAll(predicate: Predicate<DebugElement>, scope?: Function): DebugElement[];
}
/**
* Returns a DebugElement for a ElementRef.
*
* @param {ElementRef}: elementRef
* @return {DebugElement}
*/
function inspectElement(elementRef: ElementRef): DebugElement;
function asNativeElements(arr: DebugElement[]): any[];
class Scope {
static all(debugElement: DebugElement): DebugElement[];
static light(debugElement: DebugElement): DebugElement[];
static view(debugElement: DebugElement): DebugElement[];
}
class By {
static all(): Function;
static css(selector: string): Predicate<DebugElement>;
static directive(type: Type): Predicate<DebugElement>;
}
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.
*
* This exception is only thrown in dev mode.
*
* <!-- TODO: Add a link once the dev mode option is configurable -->
*
* ### Example
*
* ```typescript
* @Component({selector: 'parent'})
* @View({
* template: `
* <child [prop]="parentProp"></child>
* `,
* directives: [forwardRef(() => Child)]
* })
* class Parent {
* parentProp = "init";
* }
*
* @Directive({selector: 'child', inputs: ['prop']})
* class Child {
* constructor(public parent: Parent) {}
*
* set prop(v) {
* // this updates the parent property, which is disallowed during change detection
* // this will result in ExpressionChangedAfterItHasBeenCheckedException
* this.parent.parentProp = "updated";
* }
* }
* ```
*/
class ExpressionChangedAfterItHasBeenCheckedException extends BaseException {
constructor(exp: string, oldValue: any, currValue: any, context: any);
}
/**
* Thrown when an expression evaluation raises an exception.
*
* This error wraps the original exception to attach additional contextual information that can
* be useful for debugging.
*
* ### Example ([live demo](http://plnkr.co/edit/2Kywoz?p=preview))
*
* ```typescript
* @Directive({selector: 'child', inputs: ['prop']})
* class Child {
* prop;
* }
*
* @Component({
* selector: 'app'
* })
* @View({
* template: `
* <child [prop]="field.first"></child>
* `,
* directives: [Child]
* })
* class App {
* field = null;
* }
*
* bootstrap(App);
* ```
*
* You can access the original exception and stack through the `originalException` and
* `originalStack` properties.
*/
class ChangeDetectionError extends WrappedException {
constructor(exp: string, originalException: any, originalStack: any, context: any);
/**
* Information about the expression that triggered the exception.
*/
location: string;
}
/**
* Reference to a component's change detection object.
*/
interface ChangeDetectorRef {
/**
* Marks all {@link OnPush} ancestors as to be checked.
*
* <!-- TODO: Add a link to a chapter on OnPush components -->
*
* ### Example ([live demo](http://plnkr.co/edit/GC512b?p=preview))
*
* ```typescript
* @Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
* @View({template: `Number of ticks: {{numberOfTicks}}`})
* class Cmp {
* numberOfTicks = 0;
*
* constructor(ref: ChangeDetectorRef) {
* setInterval(() => {
* this.numberOfTicks ++
* // the following is required, otherwise the view will not be updated
* this.ref.markForCheck();
* }, 1000);
* }
* }
*
* @Component({
* selector: 'app',
* changeDetection: ChangeDetectionStrategy.OnPush
* })
* @View({
* template: `
* <cmp><cmp>
* `,
* directives: [Cmp]
* })
* class App {
* }
*
* bootstrap(App);
* ```
*/
markForCheck(): void;
/**
* Detaches the change detector from the change detector tree.
*
* The detached change detector will not be checked until it is reattached.
*
* This can also be used in combination with {@link detectChanges} to implement local change
* detection checks.
*
* <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
* <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
*
* ### Example
*
* The following example defines a component with a large list of readonly data.
* Imagine the data changes constantly, many times per second. For performance reasons,
* we want to check and update the list every five seconds. We can do that by detaching
* the component's change detector and doing a local check every five seconds.
*
* ```typescript
* class DataProvider {
* // in a real application the returned data will be different every time
* get data() {
* return [1,2,3,4,5];
* }
* }
*
* @Component({selector: 'giant-list'})
* @View({
* template: `
* <li *ng-for="#d of dataProvider.data">Data {{d}}</lig>
* `,
* directives: [NgFor]
* })
* class GiantList {
* constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {
* ref.detach();
* setInterval(() => {
* this.ref.detectChanges();
* }, 5000);
* }
* }
*
* @Component({
* selector: 'app', bindings: [DataProvider]
* })
* @View({
* template: `
* <giant-list><giant-list>
* `,
* directives: [GiantList]
* })
* class App {
* }
*
* bootstrap(App);
* ```
*/
detach(): void;
/**
* Checks the change detector and its children.
*
* This can also be used in combination with {@link detach} to implement local change detection
* checks.
*
* <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
* <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
*
* ### Example
*
* The following example defines a component with a large list of readonly data.
* Imagine, the data changes constantly, many times per second. For performance reasons,
* we want to check and update the list every five seconds.
*
* We can do that by detaching the component's change detector and doing a local change detection
* check
* every five seconds.
*
* See {@link detach} for more information.
*/
detectChanges(): void;
/**
* Reattach the change detector to the change detector tree.
*
* This also marks OnPush ancestors as to be checked. This reattached change detector will be
* checked during the next change detection run.
*
* <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
*
* ### Example ([live demo](http://plnkr.co/edit/aUhZha?p=preview))
*
* The following example creates a component displaying `live` data. The component will detach
* its change detector from the main change detector tree when the component's live property
* is set to false.
*
* ```typescript
* class DataProvider {
* data = 1;
*
* constructor() {
* setInterval(() => {
* this.data = this.data * 2;
* }, 500);
* }
* }
*
* @Component({selector: 'live-data', inputs: ['live']})
* @View({
* template: `Data: {{dataProvider.data}}`
* })
* class LiveData {
* constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {}
*
* set live(value) {
* if (value)
* this.ref.reattach();
* else
* this.ref.detach();
* }
* }
*
* @Component({
* selector: 'app',
* bindings: [DataProvider]
* })
* @View({
* template: `
* Live Update: <input type="checkbox" [(ng-model)]="live">
* <live-data [live]="live"><live-data>
* `,
* directives: [LiveData, FORM_DIRECTIVES]
* })
* class App {
* live = true;
* }
*
* bootstrap(App);
* ```
*/
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 {
constructor(wrapped: any);
static wrap(value: any): WrappedValue;
wrapped: any;
}
class SimpleChange {
constructor(previousValue: any, currentValue: any);
previousValue: any;
currentValue: any;
isFirstChange(): boolean;
}
/**
* To create a Pipe, you must implement this interface.
*
* Angular invokes the `transform` method with the value of a binding
* as the first argument, and any parameters as the second argument in list form.
*
* ## Syntax
*
* `value | pipeName[:arg0[:arg1...]]`
*
* ### Example ([live demo](http://plnkr.co/edit/f5oyIked9M2cKzvZNKHV?p=preview))
*
* The `RepeatPipe` below repeats the value as many times as indicated by the first argument:
*
* ```
* import {Pipe, PipeTransform} from 'angular2/angular2';
*
* @Pipe({name: 'repeat'})
* export class RepeatPipe implements PipeTransform {
* transform(value: any, args: any[] = []) {
* if (args.length == 0) {
* throw new Error('repeat pipe requires one argument');
* }
* let times: number = args[0];
* return value.repeat(times);
* }
* }
* ```
*
* Invoking `{{ 'ok' | repeat:3 }}` in a template produces `okokok`.
*/
interface PipeTransform {
transform(value: any, args: any[]): any;
}
/**
* To create a stateful Pipe, you should implement this interface.
*
* A stateful pipe may produce different output, given the same input. It is
* likely that a stateful pipe may contain state that should be cleaned up when
* a binding is destroyed. For example, a subscription to a stream of data may need to
* be disposed, or an interval may need to be cleared.
*
* ### Example ([live demo](http://plnkr.co/edit/hlaejwQAmWayxwc5YXQE?p=preview))
*
* In this example, a pipe is created to countdown its input value, updating it every
* 50ms. Because it maintains an internal interval, it automatically clears
* the interval when the binding is destroyed or the countdown completes.
*
* ```
* import {Pipe, PipeTransform} from 'angular2/angular2'
* @Pipe({name: 'countdown'})
* class CountDown implements PipeTransform, PipeOnDestroy {
* remainingTime:Number;
* interval:SetInterval;
* onDestroy() {
* if (this.interval) {
* clearInterval(this.interval);
* }
* }
* transform(value: any, args: any[] = []) {
* if (!parseInt(value, 10)) return null;
* if (typeof this.remainingTime !== 'number') {
* this.remainingTime = parseInt(value, 10);
* }
* if (!this.interval) {
* this.interval = setInterval(() => {
* this.remainingTime-=50;
* if (this.remainingTime <= 0) {
* this.remainingTime = 0;
* clearInterval(this.interval);
* delete this.interval;
* }
* }, 50);
* }
* return this.remainingTime;
* }
* }
* ```
*
* Invoking `{{ 10000 | countdown }}` would cause the value to be decremented by 50,
* every 50ms, until it reaches 0.
*/
interface PipeOnDestroy {
onDestroy(): void;
}
/**
* A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
*/
class IterableDiffers {
constructor(factories: IterableDifferFactory[]);
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 {
constructor(factories: KeyValueDifferFactory[]);
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;
}
/**
* Create trace scope.
*
* Scopes must be strictly nested and are analogous to stack frames, but
* do not have to follow the stack frames. Instead it is recommended that they follow logical
* nesting. You may want to use
* [Event
* Signatures](http://google.github.io/tracing-framework/instrumenting-code.html#custom-events)
* as they are defined in WTF.
*
* Used to mark scope entry. The return value is used to leave the scope.
*
* var myScope = wtfCreateScope('MyClass#myMethod(ascii someVal)');
*
* someMethod() {
* var s = myScope('Foo'); // 'Foo' gets stored in tracing UI
* // DO SOME WORK HERE
* return wtfLeave(s, 123); // Return value 123
* }
*
* Note, adding try-finally block around the work to ensure that `wtfLeave` gets called can
* negatively impact the performance of your application. For this reason we recommend that
* you don't add them to ensure that `wtfLeave` gets called. In production `wtfLeave` is a noop and
* so try-finally block has no value. When debugging perf issues, skipping `wtfLeave`, do to
* exception, will produce incorrect trace, but presence of exception signifies logic error which
* needs to be fixed before the app should be profiled. Add try-finally only when you expect that
* an exception is expected during normal execution while profiling.
*/
var wtfCreateScope: WtfScopeFn;
/**
* Used to mark end of Scope.
*
* - `scope` to end.
* - `returnValue` (optional) to be passed to the WTF.
*
* Returns the `returnValue for easy chaining.
*/
var wtfLeave: <T>(scope: any, returnValue?: T) => T;
/**
* Used to mark Async start. Async are similar to scope but they don't have to be strictly nested.
* The return value is used in the call to [endAsync]. Async ranges only work if WTF has been
* enabled.
*
* someMethod() {
* var s = wtfStartTimeRange('HTTP:GET', 'some.url');
* var future = new Future.delay(5).then((_) {
* wtfEndTimeRange(s);
* });
* }
*/
var wtfStartTimeRange: (rangeType: string, action: string) => any;
/**
* Ends a async time range operation.
* [range] is the return value from [wtfStartTimeRange] Async ranges only work if WTF has been
* enabled.
*/
var wtfEndTimeRange: (range: any) => void;
interface WtfScopeFn {
(arg0?: any, arg1?: any): any;
}
/**
* Bootstrapping a Webworker Application
*
* You instantiate the application side by calling bootstrapWebworker from your webworker index
* script.
* You can call bootstrapWebworker() exactly as you would call bootstrap() in a regular Angular
* application
* See the bootstrap() docs for more details.
*/
function bootstrapWebWorker(appComponentType: Type, componentInjectableBindings?: Array<Type | Binding | any[]>): Promise<ComponentRef>;
/**
* Message Bus is a low level API used to communicate between the UI and the background.
* Communication is based on a channel abstraction. Messages published in a
* given channel to one MessageBusSink are received on the same channel
* by the corresponding MessageBusSource.
*/
class MessageBus implements MessageBusSource, MessageBusSink {
/**
* Sets up a new channel on the MessageBus.
* MUST be called before calling from or to on the channel.
* If runInZone is true then the source will emit events inside the angular zone
* and the sink will buffer messages and send only once the zone exits.
* if runInZone is false then the source will emit events inside the global zone
* and the sink will send messages immediately.
*/
initChannel(channel: string, runInZone?: boolean): void;
/**
* Assigns this bus to the given zone.
* Any callbacks attached to channels where runInZone was set to true on initialization
* will be executed in the given zone.
*/
attachToZone(zone: NgZone): void;
/**
* Returns an {@link EventEmitter} that emits every time a message
* is received on the given channel.
*/
from(channel: string): EventEmitter;
/**
* Returns an {@link EventEmitter} for the given channel
* To publish methods to that channel just call next (or add in dart) on the returned emitter
*/
to(channel: string): EventEmitter;
}
interface MessageBusSource {
/**
* Sets up a new channel on the MessageBusSource.
* MUST be called before calling from on the channel.
* If runInZone is true then the source will emit events inside the angular zone.
* if runInZone is false then the source will emit events inside the global zone.
*/
initChannel(channel: string, runInZone: boolean): void;
/**
* Assigns this source to the given zone.
* Any channels which are initialized with runInZone set to true will emit events that will be
* executed within the given zone.
*/
attachToZone(zone: NgZone): void;
/**
* Returns an {@link EventEmitter} that emits every time a message
* is received on the given channel.
*/
from(channel: string): EventEmitter;
}
interface MessageBusSink {
/**
* Sets up a new channel on the MessageBusSink.
* MUST be called before calling to on the channel.
* If runInZone is true the sink will buffer messages and send only once the zone exits.
* if runInZone is false the sink will send messages immediatly.
*/
initChannel(channel: string, runInZone: boolean): void;
/**
* Assigns this sink to the given zone.
* Any channels which are initialized with runInZone set to true will wait for the given zone
* to exit before sending messages.
*/
attachToZone(zone: NgZone): void;
/**
* Returns an {@link EventEmitter} for the given channel
* To publish methods to that channel just call next (or add in dart) on the returned emitter
*/
to(channel: string): EventEmitter;
}
interface ClientMessageBrokerFactory {
/**
* Initializes the given channel and attaches a new {@link ClientMessageBroker} to it.
*/
createMessageBroker(channel: string, runInZone?: boolean): ClientMessageBroker;
}
interface ClientMessageBroker {
channel: any;
runOnService(args: UiArguments, returnType: Type): Promise<any>;
}
class FnArg {
constructor(value: any, type: Type);
value: any;
type: Type;
}
class UiArguments {
constructor(method: string, args?: FnArg[]);
method: string;
args: FnArg[];
}
interface ServiceMessageBrokerFactory {
/**
* Initializes the given channel and attaches a new {@link ServiceMessageBroker} to it.
*/
createMessageBroker(channel: string, runInZone?: boolean): ServiceMessageBroker;
}
/**
* Helper class for UIComponents that allows components to register methods.
* If a registered method message is received from the broker on the worker,
* the UIMessageBroker deserializes its arguments and calls the registered method.
* If that method returns a promise, the UIMessageBroker returns the result to the worker.
*/
interface ServiceMessageBroker {
channel: any;
registerMethod(methodName: string, signature: Type[], method: Function, returnType?: Type): void;
}
class ReceivedMessage {
constructor(data: {[key: string]: any});
method: string;
args: any[];
id: string;
type: string;
}
var Renderer: InjectableReference;
var RenderProtoViewRef: InjectableReference;
var ResolvedBinding: InjectableReference;
var InstantiationError: InjectableReference;
var PlatformRef: InjectableReference;
var ApplicationRef: InjectableReference;
var Compiler: InjectableReference;
var AppViewManager: InjectableReference;
var DynamicComponentLoader: InjectableReference;
var ElementRef: InjectableReference;
var TemplateRef: InjectableReference;
var ViewRef: InjectableReference;
var ProtoViewRef: InjectableReference;
var ViewContainerRef: InjectableReference;
var ComponentRef: InjectableReference;
var LifeCycle: InjectableReference;
var NgZone: InjectableReference;
var DebugElement: InjectableReference;
var ChangeDetectorRef: InjectableReference;
var ClientMessageBrokerFactory: InjectableReference;
var ClientMessageBroker: InjectableReference;
var ServiceMessageBrokerFactory: InjectableReference;
var ServiceMessageBroker: InjectableReference;
}
declare module "angular2/web_worker/worker" {
export = ngWorker;
}
declare module ngUi {
let PRIMITIVE: Type;
/**
*
* Runtime representation a type that a Component or other object is instances of.
*
* An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
* the `MyCustomComponent` constructor function.
*/
interface Type extends Function {
new(...args: any[]): any;
}
class Observable {
observer(generator: any): Object;
}
/**
* Use by directives and components to emit custom Events.
*
* ## Examples
*
* In the following example, `Zippy` alternatively emits `open` and `close` events when its
* title gets clicked:
*
* ```
* @Component({selector: 'zippy'})
* @View({template: `
* <div class="zippy">
* <div (click)="toggle()">Toggle</div>
* <div [hidden]="!visible">
* <ng-content></ng-content>
* </div>
* </div>`})
* export class Zippy {
* visible: boolean = true;
* @Output() open: EventEmitter = new EventEmitter();
* @Output() close: EventEmitter = new EventEmitter();
*
* toggle() {
* this.visible = !this.visible;
* if (this.visible) {
* this.open.next(null);
* } else {
* this.close.next(null);
* }
* }
* }
* ```
*
* Use Rx.Observable but provides an adapter to make it work as specified here:
* https://github.com/jhusain/observable-spec
*
* Once a reference implementation of the spec is available, switch to it.
*/
class EventEmitter extends Observable {
observer(generator: any): any;
toRx(): any;
next(value: any): void;
throw(error: any): void;
return(value?: any): void;
}
interface Predicate<T> {
(value: T, index?: number, array?: T[]): boolean;
}
class WrappedException extends Error {
constructor(_wrapperMessage: string, _originalException: any, _originalStack?: any, _context?: any);
wrapperMessage: string;
wrapperStack: any;
originalException: any;
originalStack: any;
context: any;
message: string;
toString(): string;
}
/**
* An injectable service for executing work inside or outside of the Angular zone.
*
* The most common use of this service is to optimize performance when starting a work consisting of
* one or more asynchronous tasks that don't require UI updates or error handling to be handled by
* Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
* can reenter the Angular zone via {@link #run}.
*
* <!-- TODO: add/fix links to:
* - docs explaining zones and the use of zones in Angular and change-detection
* - link to runOutsideAngular/run (throughout this file!)
* -->
*
* ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
* ```
* import {Component, View, NgIf, NgZone} from 'angular2/angular2';
*
* @Component({
* selector: 'ng-zone-demo'
* })
* @View({
* template: `
* <h2>Demo: NgZone</h2>
*
* <p>Progress: {{progress}}%</p>
* <p *ng-if="progress >= 100">Done processing {{label}} of Angular zone!</p>
*
* <button (click)="processWithinAngularZone()">Process within Angular zone</button>
* <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
* `,
* directives: [NgIf]
* })
* export class NgZoneDemo {
* progress: number = 0;
* label: string;
*
* constructor(private _ngZone: NgZone) {}
*
* // Loop inside the Angular zone
* // so the UI DOES refresh after each setTimeout cycle
* processWithinAngularZone() {
* this.label = 'inside';
* this.progress = 0;
* this._increaseProgress(() => console.log('Inside Done!'));
* }
*
* // Loop outside of the Angular zone
* // so the UI DOES NOT refresh after each setTimeout cycle
* processOutsideOfAngularZone() {
* this.label = 'outside';
* this.progress = 0;
* this._ngZone.runOutsideAngular(() => {
* this._increaseProgress(() => {
* // reenter the Angular zone and display done
* this._ngZone.run(() => {console.log('Outside Done!') });
* }}));
* }
*
*
* _increaseProgress(doneCallback: () => void) {
* this.progress += 1;
* console.log(`Current progress: ${this.progress}%`);
*
* if (this.progress < 100) {
* window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
* } else {
* doneCallback();
* }
* }
* }
* ```
*/
interface NgZone {
/**
* Executes the `fn` function synchronously within the Angular zone and returns value returned by
* the function.
*
* Running functions via `run` allows you to reenter Angular zone from a task that was executed
* outside of the Angular zone (typically started via {@link #runOutsideAngular}).
*
* Any future tasks or microtasks scheduled from within this function will continue executing from
* within the Angular zone.
*/
run(fn: () => any): any;
/**
* Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
* the function.
*
* Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
* doesn't trigger Angular change-detection or is subject to Angular's error handling.
*
* Any future tasks or microtasks scheduled from within this function will continue executing from
* outside of the Angular zone.
*
* Use {@link #run} to reenter the Angular zone and do work that updates the application model.
*/
runOutsideAngular(fn: () => any): any;
}
class WebWorkerApplication {
constructor(_clientMessageBrokerFactory: ClientMessageBrokerFactory, _serviceMessageBrokerFactory: ServiceMessageBrokerFactory);
createClientMessageBroker(channel: string, runInZone?: boolean): ClientMessageBroker;
createServiceMessageBroker(channel: string, runInZone?: boolean): ServiceMessageBroker;
}
/**
* Bootstrapping a WebWorker
*
* You instantiate a WebWorker application by calling bootstrap with the URI of your worker's index
* script
* Note: The WebWorker script must call bootstrapWebworker once it is set up to complete the
* bootstrapping process
*/
function bootstrap(uri: string): WebWorkerInstance;
function spawnWebWorker(uri: string): WebWorkerInstance;
/**
* Wrapper class that exposes the {@link WebWorkerApplication}
* Isolate instance and underlying {@link MessageBus} for lower level message passing.
*/
class WebWorkerInstance {
constructor(app: WebWorkerApplication, worker: Worker, bus: MessageBus);
app: WebWorkerApplication;
worker: Worker;
bus: MessageBus;
}
/**
* Message Bus is a low level API used to communicate between the UI and the background.
* Communication is based on a channel abstraction. Messages published in a
* given channel to one MessageBusSink are received on the same channel
* by the corresponding MessageBusSource.
*/
class MessageBus implements MessageBusSource, MessageBusSink {
/**
* Sets up a new channel on the MessageBus.
* MUST be called before calling from or to on the channel.
* If runInZone is true then the source will emit events inside the angular zone
* and the sink will buffer messages and send only once the zone exits.
* if runInZone is false then the source will emit events inside the global zone
* and the sink will send messages immediately.
*/
initChannel(channel: string, runInZone?: boolean): void;
/**
* Assigns this bus to the given zone.
* Any callbacks attached to channels where runInZone was set to true on initialization
* will be executed in the given zone.
*/
attachToZone(zone: NgZone): void;
/**
* Returns an {@link EventEmitter} that emits every time a message
* is received on the given channel.
*/
from(channel: string): EventEmitter;
/**
* Returns an {@link EventEmitter} for the given channel
* To publish methods to that channel just call next (or add in dart) on the returned emitter
*/
to(channel: string): EventEmitter;
}
interface MessageBusSource {
/**
* Sets up a new channel on the MessageBusSource.
* MUST be called before calling from on the channel.
* If runInZone is true then the source will emit events inside the angular zone.
* if runInZone is false then the source will emit events inside the global zone.
*/
initChannel(channel: string, runInZone: boolean): void;
/**
* Assigns this source to the given zone.
* Any channels which are initialized with runInZone set to true will emit events that will be
* executed within the given zone.
*/
attachToZone(zone: NgZone): void;
/**
* Returns an {@link EventEmitter} that emits every time a message
* is received on the given channel.
*/
from(channel: string): EventEmitter;
}
interface MessageBusSink {
/**
* Sets up a new channel on the MessageBusSink.
* MUST be called before calling to on the channel.
* If runInZone is true the sink will buffer messages and send only once the zone exits.
* if runInZone is false the sink will send messages immediatly.
*/
initChannel(channel: string, runInZone: boolean): void;
/**
* Assigns this sink to the given zone.
* Any channels which are initialized with runInZone set to true will wait for the given zone
* to exit before sending messages.
*/
attachToZone(zone: NgZone): void;
/**
* Returns an {@link EventEmitter} for the given channel
* To publish methods to that channel just call next (or add in dart) on the returned emitter
*/
to(channel: string): EventEmitter;
}
interface ClientMessageBrokerFactory {
/**
* Initializes the given channel and attaches a new {@link ClientMessageBroker} to it.
*/
createMessageBroker(channel: string, runInZone?: boolean): ClientMessageBroker;
}
interface ClientMessageBroker {
channel: any;
runOnService(args: UiArguments, returnType: Type): Promise<any>;
}
class FnArg {
constructor(value: any, type: Type);
value: any;
type: Type;
}
class UiArguments {
constructor(method: string, args?: FnArg[]);
method: string;
args: FnArg[];
}
interface ServiceMessageBrokerFactory {
/**
* Initializes the given channel and attaches a new {@link ServiceMessageBroker} to it.
*/
createMessageBroker(channel: string, runInZone?: boolean): ServiceMessageBroker;
}
/**
* Helper class for UIComponents that allows components to register methods.
* If a registered method message is received from the broker on the worker,
* the UIMessageBroker deserializes its arguments and calls the registered method.
* If that method returns a promise, the UIMessageBroker returns the result to the worker.
*/
interface ServiceMessageBroker {
channel: any;
registerMethod(methodName: string, signature: Type[], method: Function, returnType?: Type): void;
}
class ReceivedMessage {
constructor(data: {[key: string]: any});
method: string;
args: any[];
id: string;
type: string;
}
var NgZone: InjectableReference;
var ClientMessageBrokerFactory: InjectableReference;
var ClientMessageBroker: InjectableReference;
var ServiceMessageBrokerFactory: InjectableReference;
var ServiceMessageBroker: InjectableReference;
}
declare module "angular2/web_worker/ui" {
export = ngUi;
}