QueryList, which updates its contents as children are added, removed, or moved
- by a directive
- that uses a ViewContainerRef such as a `for`, an `if`, or a `switch`.
+ before child directives, a directive can't simply inject the list of child directives. Instead,
+ the directive injects a QueryList, which updates its contents as children are added,
+ removed, or moved by a directive that uses a ViewContainerRef such as a `ng-for`, an
+ `ng-if`, or an `ng-switch`.
```
@Directive({ selector: '[my-directive]' })
@@ -226,8 +225,7 @@ p.location-badge.
```
This directive would be instantiated with a QueryList which contains `Dependency` 4 and
- 6. Here, `Dependency`
- 5 would not be included, because it is not a direct child.
+ 6. Here, `Dependency` 5 would not be included, because it is not a direct child.
### Injecting a live collection of descendant directives
@@ -704,7 +702,8 @@ p.location-badge.
Specifies a set of lifecycle hostListeners in which the directive participates.
- See onChange, onDestroy, onAllChangesDone for details.
+ See onChange, onDestroy,
+ onAllChangesDone for details.
diff --git a/public/docs/js/latest/api/annotations/onAllChangesDone-const.jade b/public/docs/js/latest/api/annotations/onAllChangesDone-const.jade
index bfba9c6e6f..de3c78f7fb 100644
--- a/public/docs/js/latest/api/annotations/onAllChangesDone-const.jade
+++ b/public/docs/js/latest/api/annotations/onAllChangesDone-const.jade
@@ -1,20 +1,24 @@
-Notify a directive when the bindings of all its children have been changed.
.l-main-section - h2 Example: -pre(class="prettyprint linenums") - code. -@Directive({ - selector: '[class-set]', - lifecycle: [onAllChangesDone] -}) -class ClassSet { + h2 onAllChangesDone variable + p.location-badge. + exported from angular2/annotations - onAllChangesDone() { - } + :markdown + Notify a directive when the bindings of all its children have been changed. + + ## Example: + + ``` + @Directive({ + selector: '[class-set]', + lifecycle: [onAllChangesDone] + }) + class ClassSet { + + onAllChangesDone() { + } + + } + ``` -} -Notify a directive when any of its bindings have changed.
-This method is called right after the directive's bindings have been checked, -and before any of its children's bindings have been checked.
-It is invoked only if at least one of the directive's bindings has changed.
.l-main-section - h2 Example: -pre(class="prettyprint linenums") - code. -@Directive({ - selector: '[class-set]', - properties: [ - 'propA', - 'propB' - ], - lifecycle: [onChange] -}) -class ClassSet { - propA; - propB; - onChange(changes:{[idx: string, PropertyUpdate]}) { - // This will get called after any of the properties have been updated. - if (changes['propA']) { - // if propA was updated + h2 onChange variable + p.location-badge. + exported from angular2/annotations + + :markdown + Notify a directive when any of its bindings have changed. + + This method is called right after the directive's bindings have been checked, + and before any of its children's bindings have been checked. + + It is invoked only if at least one of the directive's bindings has changed. + + ## Example: + + ``` + @Directive({ + selector: '[class-set]', + properties: [ + 'propA', + 'propB' + ], + lifecycle: [onChange] + }) + class ClassSet { + propA; + propB; + onChange(changes:{[idx: string, PropertyUpdate]}) { + // This will get called after any of the properties have been updated. + if (changes['propA']) { + // if propA was updated + } + if (changes['propA']) { + // if propB was updated + } + } } - if (changes['propA']) { - // if propB was updated - } - } -} -Notify a directive when it has been checked.
-This method is called right after the directive's bindings have been checked, -and before any of its children's bindings have been checked.
-It is invoked every time even when none of the directive's bindings has changed.
.l-main-section - h2 Example: -pre(class="prettyprint linenums") - code. -@Directive({ - selector: '[class-set]', - lifecycle: [onCheck] -}) -class ClassSet { - onCheck() { - } -} -Notify a directive whenever a View that contains it is destroyed.
View that contains it is destroyed.
+
+ ## Example
+
+ ```
+ @Directive({
+ ...,
+ lifecycle: [onDestroy]
+ })
+ class ClassSet {
+ onDestroy() {
+ // invoked to notify directive of the containing view destruction.
+ }
+ }
+ ```
+
diff --git a/public/docs/js/latest/api/annotations/onInit-const.jade b/public/docs/js/latest/api/annotations/onInit-const.jade
index d93d412c5d..f0cae9ab98 100644
--- a/public/docs/js/latest/api/annotations/onInit-const.jade
+++ b/public/docs/js/latest/api/annotations/onInit-const.jade
@@ -1,21 +1,27 @@
-Notify a directive when it has been checked the first itme.
-This method is called right after the directive's bindings have been checked, -and before any of its children's bindings have been checked.
-It is invoked only once.
.l-main-section - h2 Example: -pre(class="prettyprint linenums") - code. -@Directive({ - selector: '[class-set]', - lifecycle: [onInit] -}) -class ClassSet { - onInit() { - } -} -CHECKED means that the change detector should be skipped until its mode changes to -CHECK_ONCE or CHECK_ALWAYS.
+.l-main-section + h2 CHECKED variable + p.location-badge. + exported from angular2/change_detection + + :markdown + CHECKED means that the change detector should be skipped until its mode changes to + CHECK_ONCE or CHECK_ALWAYS. + + -CHECK_ALWAYS means that after calling detectChanges the mode of the change detector -will remain CHECK_ALWAYS.
+.l-main-section + h2 CHECK_ALWAYS variable + p.location-badge. + exported from angular2/change_detection + + :markdown + CHECK_ALWAYS means that after calling detectChanges the mode of the change detector + will remain CHECK_ALWAYS. + + -CHECK_ONCE means that after calling detectChanges the mode of the change detector -will become CHECKED.
+.l-main-section + h2 CHECK_ONCE variable + p.location-badge. + exported from angular2/change_detection + + :markdown + CHECK_ONCE means that after calling detectChanges the mode of the change detector + will become CHECKED. + + -DEFAULT means that the change detector's mode will be set to CHECK_ALWAYS during hydration.
+.l-main-section + h2 DEFAULT variable + p.location-badge. + exported from angular2/change_detection + + :markdown + DEFAULT means that the change detector's mode will be set to CHECK_ALWAYS during hydration. + + -DETACHED means that the change detector sub tree is not a part of the main tree and -should be skipped.
+.l-main-section + h2 DETACHED variable + p.location-badge. + exported from angular2/change_detection + + :markdown + DETACHED means that the change detector sub tree is not a part of the main tree and + should be skipped. + + -ON_PUSH means that the change detector's mode will be set to CHECK_ONCE during hydration.
+.l-main-section + h2 ON_PUSH variable + p.location-badge. + exported from angular2/change_detection + + :markdown + ON_PUSH means that the change detector's mode will be set to CHECK_ONCE during hydration. + + -A collection of the 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 @View
-annotation. For example,
-instead of writing:
one could enumerate all the core directives at once:
-pre(class="prettyprint linenums") - code. -import {coreDirectives} from 'angular2/angular2'; -import {OtherDirective} from 'myDirectives'; + :markdown + A collection of the 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 `@View` + annotation. For example, + instead of writing: + + ``` + import {If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2'; + import {OtherDirective} from 'myDirectives'; + + @Component({ + selector: 'my-component' + }) + @View({ + templateUrl: 'myComponent.html', + directives: [If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective] + }) + export class MyComponent { + ... + } + ``` + one could enumerate all the core directives at once: + + ``` + import {coreDirectives} from 'angular2/angular2'; + import {OtherDirective} from 'myDirectives'; + + @Component({ + selector: 'my-component' + }) + @View({ + templateUrl: 'myComponent.html', + directives: [coreDirectives, OtherDirective] + }) + export class MyComponent { + ... + } + ``` + + -@Component({ - selector: 'my-component' -}) -@View({ - templateUrl: 'myComponent.html', - directives: [coreDirectives, OtherDirective] -}) -export class MyComponent { - ... -} -Indicates that a Control is invalid, i.e. that an error exists in the input value.
+.l-main-section + h2 INVALID variable + p.location-badge. + exported from angular2/forms + + :markdown + Indicates that a Control is invalid, i.e. that an error exists in the input value. + -Indicates that a Control is valid, i.e. that no errors exist in the input value.
+.l-main-section + h2 VALID variable + p.location-badge. + exported from angular2/forms + + :markdown + Indicates that a Control is valid, i.e. that no errors exist in the input value. + -A list of all the form directives used as part of a @View annotation.
This is a shorthand for importing them each individually.
+.l-main-section + h2 formDirectives variable + p.location-badge. + exported from angular2/forms + + :markdown + A list of all the form directives used as part of a `@View` annotation. + + This is a shorthand for importing them each individually. + -