diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index adc7bab4cb..9fa737e688 100644
--- a/public/_includes/_scripts-include.jade
+++ b/public/_includes/_scripts-include.jade
@@ -1,13 +1,16 @@
+
+script(src="/resources/js/vendor/prettify.js")
+script(src="/resources/js/vendor/lang-basic.js")
+script(src="/resources/js/vendor/lang-dart.js")
+script(src="/resources/js/vendor/jquery.js")
+
+
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js")
script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js")
-
-script(src="/resources/js/vendor/prettify.js")
-script(src="/resources/js/vendor/lang-basic.js")
-script(src="/resources/js/vendor/lang-dart.js")
script(src="/resources/js/site.js")
diff --git a/public/docs/js/latest/api/_data.json b/public/docs/js/latest/api/_data.json
deleted file mode 100644
index 0390cac11f..0000000000
--- a/public/docs/js/latest/api/_data.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "annotations": {
- "title": "Annotations"
- },
-
- "change-detection": {
- "title": "Change Detection"
- }
-}
diff --git a/public/docs/js/latest/api/annotations/Ancestor-class.jade b/public/docs/js/latest/api/annotations/Ancestor-class.jade
new file mode 100644
index 0000000000..cde8712e22
--- /dev/null
+++ b/public/docs/js/latest/api/annotations/Ancestor-class.jade
@@ -0,0 +1,74 @@
+
+p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/visibility.js (line 105)
+
+:markdown
+ Specifies that an injector should retrieve a dependency from any ancestor element.
+
+ An ancestor is any element between the parent element and shadow root.
+
+
+ ## Example
+
+ Here is a simple directive that retrieves a dependency from an ancestor element.
+
+ ```
+ @Decorator({
+ selector: '[dependency]',
+ properties: {
+ 'id':'dependency'
+ }
+ })
+ class Dependency {
+ id:string;
+ }
+
+
+ @Decorator({
+ selector: '[my-directive]'
+ })
+ class Dependency {
+ constructor(@Ancestor() dependency:Dependency) {
+ expect(dependency.id).toEqual(2);
+ };
+ }
+ ```
+
+ We use this with the following HTML template:
+
+ ```
+
+
+
+
+
+
+
+ ```
+
+ The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency from the
+ nearest ancestor element:
+ - The current element `dependency="3"` is skipped because it is not an ancestor.
+ - Next parent has no directives `
`
+ - Next parent has the `Dependency` directive and so the dependency is satisfied.
+
+ Angular injects `dependency=2`.
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ ()
+
+
+
+ :markdown
+
+
+
+
diff --git a/public/docs/js/latest/api/annotations/Attribute-class.jade b/public/docs/js/latest/api/annotations/Attribute-class.jade
new file mode 100644
index 0000000000..38e5211bdd
--- /dev/null
+++ b/public/docs/js/latest/api/annotations/Attribute-class.jade
@@ -0,0 +1,72 @@
+
+p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/di.js (line 53)
+
+:markdown
+ Specifies that a constant attribute value should be injected.
+
+ The directive can inject constant string literals of host element attributes.
+
+ ## Example
+
+ Suppose we have an `` element and want to know its `type`.
+
+ ```html
+
+ ```
+
+ A decorator can inject string literal `text` like so:
+
+ ```javascript
+ @Decorator({
+ selector: `input'
+ })
+ class InputDecorator {
+ constructor(@Attribute('type') type) {
+ // type would be `text` in this example
+ }
+ }
+ ```
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ (attributeName)
+
+
+
+ :markdown
+
+
+
+
+
+ .l-sub-section
+ h3 attributeName
+
+
+
+ :markdown
+
+
+
+
+
+
+ .l-sub-section
+ h3 token
+
+
+
+ :markdown
+
+
+
+
+
diff --git a/public/docs/js/latest/api/annotations/Decorator-class.jade b/public/docs/js/latest/api/annotations/Decorator-class.jade
new file mode 100644
index 0000000000..c3826ebfac
--- /dev/null
+++ b/public/docs/js/latest/api/annotations/Decorator-class.jade
@@ -0,0 +1,106 @@
+
+p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/annotations.js (line 750)
+
+:markdown
+ Directive that attaches behavior to DOM elements.
+
+ A decorator directive attaches behavior to a DOM element in a composable manner.
+ (see: http://en.wikipedia.org/wiki/Composition_over_inheritance)
+
+ Decorators:
+ - are simplest form of [Directive]s.
+ - are best used as a composition pattern ()
+
+ Decorators differ from [Component]s in that they:
+ - can have multiple decorators per element
+ - do not create their own evaluation context
+ - do not have a template (and therefor do not create Shadow DOM)
+
+
+ ## Example
+
+ Here we use a decorator directive to simply define basic tool-tip behavior.
+
+ ```
+ @Decorator({
+ selector: '[tooltip]',
+ properties: {
+ 'text': 'tooltip'
+ },
+ hostListeners: {
+ 'onmouseenter': 'onMouseEnter()',
+ 'onmouseleave': '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 `
` or any other element with the `tooltip` selector,
+ like so:
+
+ ```
+
+ ```
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ ({
+ selector,
+ properties,
+ events,
+ hostListeners,
+ lifecycle,
+ compileChildren = true,
+ }:{
+ selector:string,
+ properties:any,
+ events:List,
+ hostListeners:any,
+ lifecycle:List,
+ compileChildren:boolean
+ }={})
+
+
+
+ :markdown
+
+
+
+
+
+ .l-sub-section
+ h3 compileChildren
+
+
+
+ :markdown
+ If set to true the compiler does not compile the children of this directive.
+
+
+
+
diff --git a/public/docs/js/latest/api/annotations/DynamicComponent-class.jade b/public/docs/js/latest/api/annotations/DynamicComponent-class.jade
new file mode 100644
index 0000000000..64f2c8be4e
--- /dev/null
+++ b/public/docs/js/latest/api/annotations/DynamicComponent-class.jade
@@ -0,0 +1,93 @@
+
+p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/annotations.js (line 655)
+
+:markdown
+ Directive used for dynamically loading components.
+
+ Regular Angular components are statically resolved. DynamicComponent allows to you resolve a component at runtime
+ instead by providing a placeholder into which a regular Angular component can be dynamically loaded. Once loaded,
+ the dynamically-loaded component becomes permanent and cannot be changed.
+
+
+ ## Example
+
+ Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic component
+ `DynamicComp` requests loading of the `HelloCmp` component.
+
+ There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be used in other static
+ locations.
+
+ ```
+ @DynamicComponent({
+ selector: 'dynamic-comp'
+ })
+ class DynamicComp {
+ helloCmp:HelloCmp;
+ constructor(loader:DynamicComponentLoader, location:PrivateComponentLocation) {
+ loader.load(HelloCmp, location).then((helloCmp) => {
+ this.helloCmp = helloCmp;
+ });
+ }
+ }
+
+ @Component({
+ selector: 'hello-cmp'
+ })
+ @View({
+ template: "{{greeting}}"
+ })
+ class HelloCmp {
+ greeting:string;
+ constructor() {
+ this.greeting = "hello";
+ }
+ }
+ ```
+
+
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ ({
+ selector,
+ properties,
+ events,
+ hostListeners,
+ injectables,
+ lifecycle
+ }:{
+ selector:string,
+ properties:Object,
+ events:List,
+ hostListeners:Object,
+ injectables:List,
+ lifecycle:List
+ }={})
+
+
+
+ :markdown
+
+
+
+
+
+ .l-sub-section
+ h3 injectables
+
+
+
+ :markdown
+ Same as [Component.injectables].
+
+
+
+
diff --git a/public/docs/js/latest/api/annotations/Parent-class.jade b/public/docs/js/latest/api/annotations/Parent-class.jade
new file mode 100644
index 0000000000..2eaad1cac8
--- /dev/null
+++ b/public/docs/js/latest/api/annotations/Parent-class.jade
@@ -0,0 +1,61 @@
+
+p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/visibility.js (line 44)
+
+:markdown
+ Specifies that an injector should retrieve a dependency from the direct parent.
+
+ ## Example
+
+ Here is a simple directive that retrieves a dependency from its parent element.
+
+ ```
+ @Decorator({
+ selector: '[dependency]',
+ properties: {
+ 'id':'dependency'
+ }
+ })
+ class Dependency {
+ id:string;
+ }
+
+
+ @Decorator({
+ selector: '[my-directive]'
+ })
+ class Dependency {
+ constructor(@Parent() dependency:Dependency) {
+ expect(dependency.id).toEqual(1);
+ };
+ }
+ ```
+
+ We use this with the following HTML template:
+
+ ```
+
+
+
+ ```
+ The `@Parent()` annotation in our constructor forces the injector to retrieve the dependency from the
+ parent element (even thought the current element could resolve it): Angular injects `dependency=1`.
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ ()
+
+
+
+ :markdown
+
+
+
+
diff --git a/public/docs/js/latest/api/annotations/PropertySetter-class.jade b/public/docs/js/latest/api/annotations/PropertySetter-class.jade
new file mode 100644
index 0000000000..cc3812d055
--- /dev/null
+++ b/public/docs/js/latest/api/annotations/PropertySetter-class.jade
@@ -0,0 +1,53 @@
+
+p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/di.js (line 12)
+
+:markdown
+ Specifies that a function for setting host properties should be injected.
+
+ NOTE: This is changing pre 1.0.
+
+ The directive can inject a property setter that would allow setting this property on the host element.
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ (propName)
+
+
+
+ :markdown
+
+
+
+
+
+ .l-sub-section
+ h3 propName
+
+
+
+ :markdown
+
+
+
+
+
+
+ .l-sub-section
+ h3 token
+
+
+
+ :markdown
+
+
+
+
+
diff --git a/public/docs/js/latest/api/annotations/Query-class.jade b/public/docs/js/latest/api/annotations/Query-class.jade
new file mode 100644
index 0000000000..a80a868aeb
--- /dev/null
+++ b/public/docs/js/latest/api/annotations/Query-class.jade
@@ -0,0 +1,39 @@
+
+p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/di.js (line 77)
+
+:markdown
+ Specifies that a [QueryList] should be injected.
+
+ See: [QueryList] for usage and example.
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ (directive)
+
+
+
+ :markdown
+
+
+
+
+
+ .l-sub-section
+ h3 directive
+
+
+
+ :markdown
+
+
+
+
+
diff --git a/public/docs/js/latest/api/annotations/View-class.jade b/public/docs/js/latest/api/annotations/View-class.jade
new file mode 100644
index 0000000000..d901a2faf7
--- /dev/null
+++ b/public/docs/js/latest/api/annotations/View-class.jade
@@ -0,0 +1,119 @@
+
+p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/view.js (line 34)
+
+:markdown
+ Declare the available HTML templates for an application.
+
+ Each angular component requires a single `@Component` and at least one `@View` annotation. The @View
+ annotation specifies the HTML template to use, and lists the directives that are active within the template.
+
+ When a component is instantiated, the template is loaded into the component's shadow root, and the
+ expressions and statements in the template are evaluated against the component.
+
+ For details on the `@Component` annotation, see [Component].
+
+ ## Example
+
+ ```
+ @Component({
+ selector: 'greet'
+ })
+ @View({
+ template: 'Hello {{name}}!',
+ directives: [GreetUser, Bold]
+ })
+ class Greet {
+ name: string;
+
+ constructor() {
+ this.name = 'World';
+ }
+ }
+ ```
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ ({
+ templateUrl,
+ template,
+ directives
+ }: {
+ templateUrl: string,
+ template: string,
+ directives: List<Type>
+ })
+
+
+
+ :markdown
+
+
+
+
+
+ .l-sub-section
+ h3 directives
+
+
+
+ :markdown
+ Specify a list of directives that are active within a template. [TODO: true?]
+
+ Directives must be listed explicitly to provide proper component encapsulation.
+
+
+
+ ```javascript
+ @Component({
+ selector: 'my-component'
+ })
+ @View({
+ directives: [For]
+ template: '
+
+
{{item}}
+
'
+ })
+ class MyComponent {
+ }
+ ```
+
+
+
+
+
+ .l-sub-section
+ h3 template
+
+
+
+ :markdown
+ Specify an inline template for an angular component.
+
+ NOTE: either `templateURL` or `template` should be used, but not both.
+
+
+
+
+
+ .l-sub-section
+ h3 templateUrl
+
+
+
+ :markdown
+ Specify a template URL for an angular component.
+
+ NOTE: either `templateURL` or `template` should be used, but not both.
+
+
+
+
diff --git a/public/docs/js/latest/api/annotations/Viewport-class.jade b/public/docs/js/latest/api/annotations/Viewport-class.jade
new file mode 100644
index 0000000000..b5062fb744
--- /dev/null
+++ b/public/docs/js/latest/api/annotations/Viewport-class.jade
@@ -0,0 +1,124 @@
+
+p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/annotations.js (line 879)
+
+:markdown
+ Directive that controls the instantiation, destruction, and positioning of inline template elements.
+
+ A viewport directive uses a [ViewContainer] to instantiate, insert, move, and destroy views at runtime.
+ The [ViewContainer] is created as a result of `` element, and represents a location in the current view
+ where these actions are performed.
+
+ Views are always created as children of the current [View], and as siblings of the `` element. Thus a
+ directive in a child view cannot inject the viewport directive that created it.
+
+ Since viewport directives are common in Angular, and using the full `` element syntax is wordy, Angular
+ also supports a shorthand notation: `
` and `
` are equivalent.
+
+ Thus,
+
+ ```
+
+
+
+ ```
+
+ Expands in use to:
+
+ ```
+
+
+
+
+
+ ```
+
+ Notice that although the shorthand places `*foo="bar"` within the `
` element, the binding for the `Viewport`
+ controller is correctly instantiated on the `` element rather than the `
` element.
+
+
+ ## Example
+
+ Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
+
+ Here is a simple viewport directive that triggers on an `unless` selector:
+
+ ```
+ @Viewport({
+ selector: '[unless]',
+ properties: {
+ 'condition': 'unless'
+ }
+ })
+ export class Unless {
+ viewContainer: ViewContainer;
+ prevCondition: boolean;
+
+ constructor(viewContainer: ViewContainer) {
+ this.viewContainer = viewContainer;
+ this.prevCondition = null;
+ }
+
+ set condition(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();
+ }
+ }
+ }
+ ```
+
+ We can then use this `unless` selector in a template:
+ ```
+
+
+
+ ```
+
+ Once the viewport instantiates the child view, the shorthand notation for the template expands and the result is:
+
+ ```
+
+
+
+
+
+
+ ```
+
+ Note also that although the `
` template still exists inside the ``, the instantiated
+ view occurs on the second `` which is a sibling to the `` element.
+
+
+.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ ({
+ selector,
+ properties,
+ events,
+ hostListeners,
+ lifecycle
+ }:{
+ selector:string,
+ properties:any,
+ events:List,
+ lifecycle:List
+ }={})
+
+
+
+ :markdown
+
+
+
+
diff --git a/public/docs/js/latest/api/annotations/_data.json b/public/docs/js/latest/api/annotations/_data.json
index d7a58b7c6c..195829eea4 100644
--- a/public/docs/js/latest/api/annotations/_data.json
+++ b/public/docs/js/latest/api/annotations/_data.json
@@ -1,9 +1,57 @@
{
- "directive-class": {
- "title": "Directive Class"
+ "Directive-class" : {
+ "title" : "Directive Class"
},
- "component-class": {
- "title": "Component Class"
+ "Component-class" : {
+ "title" : "Component Class"
+ },
+
+ "DynamicComponent-class" : {
+ "title" : "DynamicComponent Class"
+ },
+
+ "Decorator-class" : {
+ "title" : "Decorator Class"
+ },
+
+ "Viewport-class" : {
+ "title" : "Viewport Class"
+ },
+
+ "onDestroy-var" : {
+ "title" : "onDestroy Var"
+ },
+
+ "onChange-var" : {
+ "title" : "onChange Var"
+ },
+
+ "onAllChangesDone-var" : {
+ "title" : "onAllChangesDone Var"
+ },
+
+ "PropertySetter-class" : {
+ "title" : "PropertySetter Class"
+ },
+
+ "Attribute-class" : {
+ "title" : "Attribute Class"
+ },
+
+ "Query-class" : {
+ "title" : "Query Class"
+ },
+
+ "View-class" : {
+ "title" : "View Class"
+ },
+
+ "Parent-class" : {
+ "title" : "Parent Class"
+ },
+
+ "Ancestor-class" : {
+ "title" : "Ancestor Class"
}
-}
+}
\ No newline at end of file
diff --git a/public/docs/js/latest/api/annotations/component-class.jade b/public/docs/js/latest/api/annotations/component-class.jade
index 127d1d5fd6..9e8579c05b 100644
--- a/public/docs/js/latest/api/annotations/component-class.jade
+++ b/public/docs/js/latest/api/annotations/component-class.jade
@@ -1,312 +1,144 @@
-p.
- Directives allow you to attach behavior to elements in the DOM.
- Directive is an abstract concept, instead use concrete directives: [Component], [DynamicComponent], [Decorator] or [Viewport].
- 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:
p.
- For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments.
- Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/annotations.js (line 516)
+:markdown
+ 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 a child [Injector] which is configured with the [Component.injectables].
+
+ All template expressions and statements are then evaluated against the component instance.
+
+ For details on the `@View` annotation, see [View].
+
+ ## Example
+
+ ```
+ @Component({
+ selector: 'greet'
+ })
+ @View({
+ template: 'Hello {{name}}!'
+ })
+ class Greet {
+ name: string;
+
+ constructor() {
+ this.name = 'World';
+ }
+ }
+ ```
+
.l-main-section
-
- h2 Understanding How Injection Works
-
- p There are three stages of injection resolution.
-
- ol
- li Pre-existing Injectors:
- ul
- li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
- li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
-
- li Component Injectors: Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
-
- li Element Injectors: Each component 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.
-
-
- p 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.
-
- p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
-
- ol
- li Dependencies on the current element
- li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
- li Dependencies on component injectors and their parents until it encounters the root component
- li Dependencies on pre-existing injectors
-
- p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
-
- p To inject other directives, declare the constructor parameter as:
-
- ul
- li directive:DirectiveType: a directive on the current element only
- li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
- li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
- li @Children query:Query: A live collection of direct child directives [TO BE IMPLEMENTED].
- li @Descendants query:Query: A live collection of any child directives [TO BE IMPLEMENTED].
-
- p To inject element-specific special objects, declare the constructor parameter as:
-
- ul
- li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming)
- li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only
- li bindingPropagation: BindingPropagation to control change detection in a more granular way.
-
-.l-main-section
- h2 Example of Injection
-
- p The following example demonstrates how dependency injection resolves constructor arguments in practice.
-
- p Assume this HTML template:
-
- pre.prettyprint.linenums.lang-html
- code.
- <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>
-
- p With the following dependency decorator and SomeService injectable class.
-
- pre.prettyprint.linenums
- code.
- @Injectable()
- class SomeService {
- }
-
- @Decorator({
- selector: '[dependency]',
- bind: {
- 'id':'dependency'
- }
- })
- class Dependency {
- id:string;
- }
-
- p Let's step through the different ways in which MyDirective could be declared...
-
- .l-sub-section
- h3 No injection
-
- p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor() {
- }
- }
-
- p This directive would be instantiated with no dependencies.
-
- .l-sub-section
- h3 Component-level injection
-
- p Directives can inject any injectable instance from the closest component injector or any of its parents.
-
- p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(someService: SomeService) {
- }
- }
-
- p This directive would be instantiated with a dependency on SomeService.
-
-
- .l-sub-section
- h3 Injecting a directive from the current element
-
- p Directives can inject other directives declared on the current element.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(dependency: Dependency) {
- expect(dependency.id).toEqual(3);
- }
- }
-
- p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
-
-
- .l-sub-section
- h3 Injecting a directive from a direct parent element
-
- p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Parent() dependency: Dependency) {
- expect(dependency.id).toEqual(2);
- }
- }
-
- p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2".
-
- .l-sub-section
- h3 Injecting a directive from any ancestor elements
-
- p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Ancestor() dependency: Dependency) {
- expect(dependency.id).toEqual(2);
- }
- }
-
- p Unlike the @Parent which only checks the parent, @Ancestor checks 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".
-
- .l-sub-section
- h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
- p 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 asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Children() dependencies:Query) {
- }
- }
-
- p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
-
- .l-sub-section
- h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
-
- p Similar to @Children above, but also includes the children of the child elements.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Children() dependencies:Query) {
- }
- }
-
- p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
-
- .l-sub-section
- h3 Optional injection
-
- p 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.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Optional() dependency:Dependency) {
- }
- }
-
- p 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.
-
-.l-main-section
-
h2 Members
+ .l-sub-section
+ h3 constructor
+
+
+ pre.prettyprint
+ code.
+ ({
+ selector,
+ properties,
+ events,
+ hostListeners,
+ injectables,
+ lifecycle,
+ changeDetection = DEFAULT
+ }:{
+ selector:string,
+ properties:Object,
+ events:List,
+ hostListeners:Object,
+ injectables:List,
+ lifecycle:List,
+ changeDetection:string
+ }={})
+
+
+
+ :markdown
+
+
+
- p
- strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
.l-sub-section
- h3 bind
+ h3 changeDetection
- p Enumerates the set of properties that accept data binding for a directive.
+
- p The bind property defines a set of directiveProperty to bindingProperty key-value pairs:
-
- ul
- li directiveProperty specifies the component property where the value is written.
- li bindingProperty specifies the DOM property where the value is read from.
-
- p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component.
+ :markdown
+ 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.
-.l-main-section
- h2 Syntax
- pre.prettyprint.linenums
- code.
- @Directive({
- bind: {
- 'directiveProperty1': 'bindingProperty1',
- 'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
- ...
- }
+
+
+ .l-sub-section
+ h3 injectables
+
+
+
+ :markdown
+ Defines the set of injectable objects that are visible to a Component and its children.
+
+ The [injectables] defined in the Component annotation allow you to configure a set of bindings for the component's
+ injector.
+
+ When a component is instantiated, Angular creates a new child Injector, which is configured with the bindings in
+ the Component [injectables] annotation. The injectable objects then become available for injection to the component
+ itself and any of the directives in the component's template, i.e. they are not available to the directives which
+ are children in the component's light DOM.
+
+
+ The syntax for configuring the [injectables] injectable is identical to [Injector] injectable configuration. See
+ [Injector] for additional detail.
+
+
+ ## Simple Example
+
+ Here is an example of a class that can be injected:
+
+ ```
+ class Greeter {
+ greet(name:string) {
+ return 'Hello ' + name + '!';
+ }
}
-
-.l-main-section
- h2 Basic Property Binding
-
- p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example:
-
- pre.prettyprint.linenums
- code.
- @Decorator({
- selector: '[tooltip]',
- bind: {
- 'text': 'tooltip'
- }
+
+ @Component({
+ selector: 'greet',
+ injectables: [
+ Greeter
+ ]
})
- class Tooltip {
- set text(text) {
- // This will get called every time the 'tooltip' binding changes with the new value.
- }
- }
-
- p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below:
-
- pre.prettyprint.linenums
- code.
- <div [tooltip]="someExpression">...</div>
- <div tooltip="Some Text">...</div>
-
- p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property.
-
-.l-main-section
- h2 Bindings With Pipes
-
- p You can also use pipes when writing binding definitions for a directive.
-
- p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
-
- pre.prettyprint.linenums
- code.
- @Decorator({
- selector: '[class-set]',
- bind: {
- 'classChanges': 'classSet | keyValDiff'
- }
+ @View({
+ template: `{{greeter.greet('world')}}!`,
+ directives: Child
})
- class ClassSet {
- set classChanges(changes:KeyValueChanges) {
- // This will get called every time the `class-set` expressions changes its structure.
+ class HelloWorld {
+ greeter:Greeter;
+
+ constructor(greeter:Greeter) {
+ this.greeter = greeter;
}
}
+ ```
- p The template that this directive is used in may also contain its own pipes. For example:
- pre.prettyprint.linenums
- code.
- <div [class-set]="someExpression | somePipe">
- p In this case, the two pipes compose as if they were inlined: someExpression | somePipe | keyValDiff.
-.location-badge exported from angular2/annotations
\ No newline at end of file
diff --git a/public/docs/js/latest/api/annotations/directive-class.jade b/public/docs/js/latest/api/annotations/directive-class.jade
index 127d1d5fd6..1bea22cd7d 100644
--- a/public/docs/js/latest/api/annotations/directive-class.jade
+++ b/public/docs/js/latest/api/annotations/directive-class.jade
@@ -1,267 +1,431 @@
+
p.
+ exported from angular2/annotations
+ defined in angular2/src/core/annotations/annotations.js (line 238)
+
+:markdown
Directives allow you to attach behavior to elements in the DOM.
- Directive is an abstract concept, instead use concrete directives: [Component], [DynamicComponent], [Decorator] or [Viewport].
- 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:
-
-p.
- For each directive, the [ElementInjector] attempts to resolve the directive's constructor arguments.
- Angular instantiates directives for each matched element using [ElementInjector] in a depth-first order, as declared in the HTML.
-
+
+ Directive is an abstract concept, instead use concrete directives: [Component], [DynamicComponent], [Decorator]
+ or [Viewport].
+
+ 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 [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was
+ specified as `@Optional`, returns `null`.
+ - The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
+ - *Component Injectors*: Each `@Component` has its own [Injector], and they follow the same parent-child hierarchy
+ as the components in the DOM.
+ - *Element Injectors*: Each component 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 [View]:
+
+ 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
+ - `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current element and the
+ Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will
+ be ignored.
+ - `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent element only.
+ - `@Children query:Query`: A live collection of direct child directives [TO BE IMPLEMENTED].
+ - `@Descendants query:Query`: A live collection of any child directives [TO BE IMPLEMENTED].
+
+ To inject element-specific special objects, declare the constructor parameter as:
+ - `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming)
+ - `viewContainer: ViewContainer` to control child template instantiation, for [Viewport] 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:
+
+ ```
+
+
+
+
+
+
+
+
+
+
+ ```
+
+ With the following `dependency` decorator and `SomeService` injectable class.
+
+ ```
+ @Injectable()
+ class SomeService {
+ }
+
+ @Decorator({
+ selector: '[dependency]',
+ properties: {
+ '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`.
+
+ ```
+ @Decorator({ 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.
+
+ ```
+ @Decorator({ 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.
+
+ ```
+ @Decorator({ 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 a direct parent element
+
+ Directives can inject other directives declared on a direct parent element. By definition, a directive with a
+ `@Parent` annotation does not attempt to resolve dependencies for the current element, even if this would satisfy
+ the dependency.
+
+ ```
+ @Decorator({ selector: '[my-directive]' })
+ class MyDirective {
+ constructor(@Parent() dependency: Dependency) {
+ expect(dependency.id).toEqual(2);
+ }
+ }
+ ```
+ This directive would be instantiated with `Dependency` declared at the parent element, in this case `dependency="2"`.
+
+
+ ### 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
+ parent element and its parents. By definition, a directive with an `@Ancestor` annotation does not attempt to
+ resolve dependencies for the current element, even if this would satisfy the dependency.
+
+ ```
+ @Decorator({ selector: '[my-directive]' })
+ class MyDirective {
+ constructor(@Ancestor() dependency: Dependency) {
+ expect(dependency.id).toEqual(2);
+ }
+ }
+ ```
+
+ Unlike the `@Parent` which only checks the parent, `@Ancestor` checks 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 [PENDING IMPLEMENTATION]
+
+ 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 asynchronously
+ injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a
+ `for`, an `if`, or a `switch`.
+
+ ```
+ @Decorator({ selector: '[my-directive]' })
+ class MyDirective {
+ constructor(@Children() dependencies:Query) {
+ }
+ }
+ ```
+
+ This directive would be instantiated with a [Query] 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 direct descendant directives [PENDING IMPLEMENTATION]
+
+ Similar to `@Children` above, but also includes the children of the child elements.
+
+ ```
+ @Decorator({ selector: '[my-directive]' })
+ class MyDirective {
+ constructor(@Children() dependencies:Query) {
+ }
+ }
+ ```
+
+ 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.
+
+ ```
+ @Decorator({ 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.
+
.l-main-section
+ h2 Members
+ .l-sub-section
+ h3 constructor
- h2 Understanding How Injection Works
+
+ pre.prettyprint
+ code.
+ ({
+ selector,
+ properties,
+ events,
+ hostListeners,
+ lifecycle
+ }:{
+ selector:string,
+ properties:any,
+ events:List,
+ hostListeners: any,
+ lifecycle:List
+ }={})
- p There are three stages of injection resolution.
+
- ol
- li Pre-existing Injectors:
- ul
- li The terminal [Injector] cannot resolve dependencies. It either throws an error or, if the dependency was specified as @Optional, returns null.
- li The primordial injector resolves browser singleton resources, such as: cookies, title, location, and others.
-
- li Component Injectors: Each @Component has its own [Injector], and they follow the same parent-child hierarchy as the components in the DOM.
-
- li Element Injectors: Each component 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.
+ :markdown
+
- p 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.
- p Angular then resolves dependencies as follows, according to the order in which they appear in the [View]:
- ol
- li Dependencies on the current element
- li Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
- li Dependencies on component injectors and their parents until it encounters the root component
- li Dependencies on pre-existing injectors
+ .l-sub-section
+ h3 events
- p The [ElementInjector] can inject other directives, element-specific special objects, or it can delegate to the parent injector.
+
- p To inject other directives, declare the constructor parameter as:
-
- ul
- li directive:DirectiveType: a directive on the current element only
- li @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefor even if it could resolve it, it will be ignored.
- li @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
- li @Children query:Query: A live collection of direct child directives [TO BE IMPLEMENTED].
- li @Descendants query:Query: A live collection of any child directives [TO BE IMPLEMENTED].
-
- p To inject element-specific special objects, declare the constructor parameter as:
-
- ul
- li element: NgElement to obtain a DOM element (DEPRECATED: replacement coming)
- li viewContainer: ViewContainer to control child template instantiation, for [Viewport] directives only
- li bindingPropagation: BindingPropagation to control change detection in a more granular way.
-
-.l-main-section
- h2 Example of Injection
-
- p The following example demonstrates how dependency injection resolves constructor arguments in practice.
-
- p Assume this HTML template:
-
- pre.prettyprint.linenums.lang-html
- code.
- <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>
-
- p With the following dependency decorator and SomeService injectable class.
-
- pre.prettyprint.linenums
- code.
- @Injectable()
- class SomeService {
+ :markdown
+ Enumerates the set of emitted events.
+
+ ## Syntax
+
+ ```
+ @Component({
+ events: ['status-change']
+ })
+ class TaskComponent {
+ statusChange:EventEmitter;
+
+ constructor() {
+ this.complete = new EventEmitter();
+ }
+
+ onComplete() {
+ this.statusChange.next("completed");
+ }
}
+ ```
+
+
+
+
+ .l-sub-section
+ h3 hasLifecycleHook
+
+
+ pre.prettyprint
+ code.
+ (hook:string)
+
+
+
+ :markdown
+ Returns true if a directive participates in a given [LifecycleEvent].
+
+ See: [onChange], [onDestroy], [onAllChangesDone] for details.
+
+
+
+
+
+ .l-sub-section
+ h3 hostListeners
+
+
+
+ :markdown
+ Specifies which DOM hostListeners a directive listens to.
+
+ The `hostListeners` property defines 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.
+
+ To listen to global events, a target must be added to the event name.
+ The target can be `window`, `document` or `body`.
+
+ When writing a directive event binding, you can also refer to the following local variables:
+ - `$event`: Current event object which triggered the event.
+ - `$target`: The source of the event. This will be either a DOM element or an Angular directive.
+ [TO BE IMPLEMENTED]
+
+
+ ## Syntax
+
+ ```
+ @Directive({
+ hostListeners: {
+ 'event1': 'onMethod1(arguments)',
+ 'target:event2': 'onMethod2(arguments)',
+ ...
+ }
+ }
+ ```
+
+ ## Basic Event Binding:
+
+ Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
+ You would define the event binding as follows:
+
+ ```
@Decorator({
- selector: '[dependency]',
- bind: {
- 'id':'dependency'
+ selector: 'input',
+ hostListeners: {
+ 'change': 'onChange($event)',
+ 'window:resize': 'onResize($event)'
}
})
- class Dependency {
- id:string;
+ class InputDecorator {
+ onChange(event:Event) {
+ }
+ onResize(event:Event) {
+ }
}
+ ```
+
+ Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.
- p Let's step through the different ways in which MyDirective could be declared...
- .l-sub-section
- h3 No injection
- p Here the constructor is declared with no arguments, therefore nothing is injected into MyDirective.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor() {
- }
- }
-
- p This directive would be instantiated with no dependencies.
-
- .l-sub-section
- h3 Component-level injection
-
- p Directives can inject any injectable instance from the closest component injector or any of its parents.
-
- p Here, the constructor declares a parameter, someService, and injects the SomeService type from the parent component's injector.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(someService: SomeService) {
- }
- }
-
- p This directive would be instantiated with a dependency on SomeService.
.l-sub-section
- h3 Injecting a directive from the current element
+ h3 lifecycle
+
+
+
+ :markdown
+ Specifies a set of lifecycle hostListeners in which the directive participates.
+
+ See: [onChange], [onDestroy], [onAllChangesDone] for details.
- p Directives can inject other directives declared on the current element.
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(dependency: Dependency) {
- expect(dependency.id).toEqual(3);
- }
- }
- p This directive would be instantiated with Dependency declared at the same element, in this case dependency="3".
.l-sub-section
- h3 Injecting a directive from a direct parent element
+ h3 properties
- p Directives can inject other directives declared on a direct parent element. By definition, a directive with a @Parent annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
+
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Parent() dependency: Dependency) {
- expect(dependency.id).toEqual(2);
- }
- }
-
- p This directive would be instantiated with Dependency declared at the parent element, in this case dependency="2".
-
- .l-sub-section
- h3 Injecting a directive from any ancestor elements
-
- p Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the parent element and its parents. By definition, a directive with an @Ancestor annotation does not attempt to resolve dependencies for the current element, even if this would satisfy the dependency.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Ancestor() dependency: Dependency) {
- expect(dependency.id).toEqual(2);
- }
- }
-
- p Unlike the @Parent which only checks the parent, @Ancestor checks 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".
-
- .l-sub-section
- h3 Injecting a live collection of direct child directives [PENDING IMPLEMENTATION]
- p 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 asynchronously injects a [Query], which updates as children are added, removed, or moved by any [ViewPort] directive such as a for, an if, or a switch.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Children() dependencies:Query) {
- }
- }
-
- p. This directive would be instantiated with a [Query] which contains Dependency 4 and 6. Here, Dependency 5 would not be included, because it is not a direct child.
-
- .l-sub-section
- h3 Injecting a live collection of direct descendant directives [PENDING IMPLEMENTATION]
-
- p Similar to @Children above, but also includes the children of the child elements.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Children() dependencies:Query) {
- }
- }
-
- p This directive would be instantiated with a Query which would contain Dependency 4, 5 and 6.
-
- .l-sub-section
- h3 Optional injection
-
- p 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.
-
- pre.prettyprint.linenums
- code.
- @Decorator({ selector: '[my-directive]' })
- class MyDirective {
- constructor(@Optional() dependency:Dependency) {
- }
- }
-
- p 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.
-
-.l-main-section
-
- h2 Members
-
- p
- strong constructor({ selector, bind, events, lifecycle }:{ selector:string, bind:any, events: any, lifecycle:List }={})
-
- .l-sub-section
- h3 bind
-
- p Enumerates the set of properties that accept data binding for a directive.
-
- p The bind property defines a set of directiveProperty to bindingProperty key-value pairs:
-
- ul
- li directiveProperty specifies the component property where the value is written.
- li bindingProperty specifies the DOM property where the value is read from.
-
- p You can include [Pipes] when specifying a bindingProperty to allow for data transformation and structural change detection of the value. These pipes will be evaluated in the context of this component.
-
-
-.l-main-section
- h2 Syntax
-
- pre.prettyprint.linenums
- code.
+ :markdown
+ Enumerates the set of properties that accept data binding for a directive.
+
+ The `properties` property defines a set of `directiveProperty` to `bindingProperty`
+ key-value pairs:
+
+ - `directiveProperty` specifies the component property where the value is written.
+ - `bindingProperty` specifies the DOM property where the value is read from.
+
+ You can include [Pipes] when specifying a `bindingProperty` to allow for data transformation and structural
+ change detection of the value. These pipes will be evaluated in the context of this component.
+
+
+ ## Syntax
+
+ ```
@Directive({
- bind: {
+ properties: {
'directiveProperty1': 'bindingProperty1',
'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
...
}
}
-
-.l-main-section
- h2 Basic Property Binding
-
- p We can easily build a simple Tooltip directive that exposes a tooltip property, which can be used in templates with standard Angular syntax. For example:
-
- pre.prettyprint.linenums
- code.
+ ```
+
+
+ ## Basic Property Binding
+
+ We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can be used in templates
+ with standard Angular syntax. For example:
+
+ ```
@Decorator({
selector: '[tooltip]',
- bind: {
+ properties: {
'text': 'tooltip'
}
})
@@ -270,28 +434,32 @@ p.
// This will get called every time the 'tooltip' binding changes with the new value.
}
}
-
- p We can then bind to the tooltip' property as either an expression (someExpression`) or as a string literal, as shown in the HTML template below:
-
- pre.prettyprint.linenums
- code.
- <div [tooltip]="someExpression">...</div>
- <div tooltip="Some Text">...</div>
-
- p Whenever the someExpression expression changes, the bind declaration instructs Angular to update the Tooltip's text property.
-
-.l-main-section
- h2 Bindings With Pipes
-
- p You can also use pipes when writing binding definitions for a directive.
-
- p For example, we could write a binding that updates the directive on structural changes, rather than on reference changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
-
- pre.prettyprint.linenums
- code.
+ ```
+
+ We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a string literal, as
+ shown in the HTML template below:
+
+ ```html
+
...
+
...
+ ```
+
+ Whenever the `someExpression` expression changes, the `properties` declaration instructs
+ Angular to update the `Tooltip`'s `text` property.
+
+
+
+ ## Bindings With Pipes
+
+ You can also use pipes when writing binding definitions for a directive.
+
+ For example, we could write a binding that updates the directive on structural changes, rather than on reference
+ changes, as normally occurs in change detection. (See: [Pipe] and [keyValueDiff] documentation for more details.)
+
+ ```
@Decorator({
selector: '[class-set]',
- bind: {
+ properties: {
'classChanges': 'classSet | keyValDiff'
}
})
@@ -300,13 +468,55 @@ p.
// This will get called every time the `class-set` expressions changes its structure.
}
}
+ ```
+
+ The template that this directive is used in may also contain its own pipes. For example:
+
+ ```html
+
+ ```
+
+ In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.
+
+
+
+
+
+ .l-sub-section
+ h3 selector
+
+
+
+ :markdown
+ 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.
+
+
+
+
+ Suppose we have a directive with an `input[type=text]` selector.
+
+ And the following HTML:
+
+ ```html
+